Angular 5 Stagger动画 – 如何进行逆序

发布时间：2020-12-17 17:57:23 所属栏目：安全来源：网络整理

导读：在使用Angular CDK和开发自定义组件时,我正在尝试使用ngIf和ngFor实现交错动画. 动画是一系列简单的淡入. 以下简化的HTML： button (click)="visible = !visible"Toggle/buttondiv class="parent" @parentAnimation *ngIf="visible" p class="child"Child 1/

在使用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',[....
...

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!