动画中的过渡在 Angular 中不起作用答案

【问题标题】：Transition in Animations not working in Angular动画中的过渡在 Angular 中不起作用
【发布时间】：2018-09-12 07:54:44
【问题描述】：

我的 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>

当我点击一个主要项目时，它会显示子项目列表但没有动画。只需显示和隐藏子列表。并且在单击任何主列表项时显示所有子列表，而不是仅显示特定的子列表。如何解决这个问题？

【问题讨论】：

标签： angular

【解决方案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'))
    ])
  ]
})

【讨论】：