Question

我的Angular项目中有一个主列表和子列表面板。单击主列表项时，我需要为子列表设置动画以使其向下/向上折叠。我创建了这个：

component.ts：

import { Component, OnInit} from '@angular/core';
import { trigger,state,style,transition,animate,group } from '@angular/animations';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./../../resources/css/style.css'],
  animations: [
        trigger('subcat', [
        state('show', style({
            display: 'block',
        })),
        state('hide', style({
            display: 'none',
        })),
        transition('show <=> hide', animate('100ms ease-out'))
    ])
  ]
})

export class CategoryComponent implements OnInit {

  show: boolean = false;

  state: string = 'hide';

  constructor(){}

  showlist() {
        this.state = (this.state === 'hide' ? 'show' : 'hide');
  }

  ngOnInit(){

  }

}

component.html：

<div class="category">
   <div class="row">
          <dl *ngFor="let item of array">
            <dt *ngIf="post.parent_id=='0';then m" id="itemcat" style="width: 15px"></dt>
            <ng-template #m><dt (click)="showlist()" ><a [routerLink]="[/list]" routerLinkActive="active">{{post.name}}</a></dt>
                <dl *ngFor="let subitem of array">
                <dt *ngIf="sub.parent_id==post.id;then s"></dt>
                <ng-template #s><dd  [@subcat]='state' ><a routerLink="/sublist" routerLinkActive="active">{{sub.name}}</a></dd></ng-template>
                </dl>
            </ng-template>
          </dl>
   </div>
</div>

当我单击一个主要项目时，它将显示子项目列表，但不显示动画。只需显示和隐藏子列表即可。并且还可以在单击任何一个主列表项时显示所有子列表，而不是仅显示特定的子列表。怎么解决呢？

Answer 1

您实际上没有设置任何动画，并且您使用过的唯一css属性（display无法设置动画。您需要类似：

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./../../resources/css/style.css'],
  animations: [
        trigger('subcat', [
        state('show', style({
            translate: translateY(0); // or height: '*' or ...
            opacity: 1;
        })),
        state('hide', style({
            translate: translateY(-100%); // or height: '0' or ...
            opacity: 0
        })),
        transition('show <=> hide', animate('100ms ease-out'))
    ])
  ]
})

动画过渡在Angular中不起作用

1 个答案: