[英]Angular 4 Animate list item by item
I wish to animate a list ul > li
item by item. 我希望逐项制作一个列表
ul > li
动画。
It's OK when query :enter
, but I need to animate the :leave
state before the :enter
when list elements change, how can I do that? 查询
:enter
,但是当列表元素更改时,我需要在:enter
之前设置:leave
状态的动画,我该怎么做?
Follow my actual code: 按照我的实际代码:
@Component({
selector: 'ng-list',
templateUrl: './ng-list.component.html',
encapsulation: ViewEncapsulation.None,
animations: [
trigger('listAnimation', [
transition('* => *', [
query(':enter', style({ opacity: 0 }), { optional: true }),
query(':enter', stagger('300ms', [
animate('1s ease-in', keyframes([
style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
]))]), { optional: true })
])
])
]
})
export class NgListComponent {
items: Array<any>;
animateItems = false;
constructor() {
this.items = new Array<INgxSidemenuItem>();
}
selectMenu(item: INgxSidemenuItem) {
this.animate();
// ...
}
private animate() {
this.animateItems = !this.animateItems;
}
}
<div [@listAnimation]="animateItems">
<div class="menu-item" *ngFor="let item of items (click)="selectMenu(item)">
<a (click)="selectMenu(item)">{{ item.title }}</a>
</div>
</div>
You are not supposed to query ':enter'
. 您不应该查询
':enter'
。 :enter
is just a shorthand for void => *
meaning it can be used in a transition()
to declare between what states the transition regards. :enter
只是void => *
的简写,意味着可以在transition()
使用它来声明转换所考虑的状态之间。 What you want is to query a selector. 您要查询一个选择器。 Since
query()
uses document.querySelectorAll()
behind the scenes, you can use any CSS selector to get select the elements that you want to stagger. 由于
query()
在后台使用document.querySelectorAll()
,因此您可以使用任何CSS选择器来选择要交错的元素。 What you therefore want to do is to query the divs, either by just the tag or by the class name. 因此,您要做的就是通过标签或类名查询div。 For example, using the class name:
例如,使用类名:
trigger('listAnimation', [
transition('* => *', [
query('.menu-item', style({ opacity: 0 }), { optional: true }),
query('.menu-item', stagger('300ms', [
animate('1s ease-in', keyframes([
style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
]))]), { optional: true })
])
])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.