Angular 5 交错动画 - 如何倒序
Angular 5 Stagger Animation - How to do Reverse Order
在使用 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
从上面的link可以看出,问题是在隐藏元素时,需要颠倒顺序(后进先出)。
查看 stagger
和 query
文档,我无法找到反转顺序的内置方法。
有什么合适的方法可以使用 angular 动画来实现吗?
在第二个交错处使用负计时:
....
query('.child', stagger('-500ms', [....
...
在使用 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
从上面的link可以看出,问题是在隐藏元素时,需要颠倒顺序(后进先出)。
查看 stagger
和 query
文档,我无法找到反转顺序的内置方法。
有什么合适的方法可以使用 angular 动画来实现吗?
在第二个交错处使用负计时:
....
query('.child', stagger('-500ms', [....
...