Angular 5 交错动画 - 如何倒序答案

【问题标题】：Angular 5 Stagger Animation - How to do Reverse OrderAngular 5 交错动画 - 如何倒序
【发布时间】：2018-06-28 07:31:07
【问题描述】：

在使用 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', [
                query('.child', style({opacity: 1})),
                query('.child', stagger('500ms', [
                    animate('100ms .1s ease-out', style({opacity: 0}))
                ]))
            ])
        ])
    ]
})
export class AppComponent  {
   visible = false;
}

StackBlitz - https://stackblitz.com/edit/angular-5dj532

从上面的链接可以看出，问题是隐藏元素时，需要颠倒顺序（LIFO）。

查看stagger 和query 文档，我找不到反转顺序的内置方法。

是否有任何适当的方法可以使用角度动画来实现这一点？

【问题讨论】：

标签： javascript angular typescript angular5 angular-animations

【解决方案1】：

在第二个交错时使用负时间：

....
query('.child', stagger('-500ms', [....
...

Demo

【讨论】：