在使用Angular CDK和开发自定义组件时,我正在尝试使用ngIf和ngFor实现交错动画.
动画是一系列简单的淡入.
动画是一系列简单的淡入.
以下简化的HTML:
<button (click)="visible = !visible">Toggle</button> <div class="parent" @parentAnimation *ngIf="visible"> <p class="child">Child 1</p> <p class="child">Child 2</p> <p class="child">Child 3</p> </div>
和组件:
@Component({ selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ],animations: [ trigger('parentAnimation',[ transition('void => *',[ query('.child',style({opacity: 0})),query('.child',stagger('500ms',[ animate('100ms .1s ease-out',style({opacity: 1})) ])) ]),transition('* => void',style({opacity: 1})),style({opacity: 0})) ])) ]) ]) ] }) export class AppComponent { visible = false; }
StackBlitz – https://stackblitz.com/edit/angular-5dj532
从上面的链接中可以看出,问题是当隐藏元素时,需要颠倒顺序(LIFO).
有没有适当的方法来实现这个使用角度动画?
解决方法
在第二个交错时使用负时间:
.... query('.child',stagger('-500ms',[.... ...