[英]Angular 2 animate *ngFor list item one after other using new Animation support in RC 5
我有一個組件從服務器獲取項目列表,然后在模板中使用 *ngFor 顯示該列表。
我希望列表顯示一些動畫,但一個接一個。 我的意思是每個列表項都應該在另一個列表項中設置動畫。
我正在嘗試這樣的事情:
import { Component, Input, trigger, state, animate, transition, style } from '@angular/core';
@Component({
selector: 'list-item',
template: ` <li @flyInOut="'in'">{{item}}</li>`,
animations: [
trigger('flyInOut', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [
style({ transform: 'translateX(-100%)' }),
animate(100)
]),
transition('* => void', [
animate(100, style({ transform: 'translateX(100%)' }))
])
])
]
})
export class ListItemComponent {
@Input() item: any;
}
在我的列表組件模板中,我像這樣使用它:
<ul>
<li *ngFor="let item of list;">
<list-item [item]="item"></list-item>
</li>
</ul>
它所做的是一次顯示整個列表。 我希望項目通過一些動畫一一進入。
我在文檔中找不到對ngFor
stagger
支持,但現在有animation.done
events
,可用於制作staggering ngFor
@Component({
selector: 'my-app',
template: `
<ul>
<li *ngFor="let hero of staggeringHeroes; let i = index"
(@flyInOut.done)="doNext()"
[@flyInOut]="'in'" (click)="removeMe(i)">
{{hero}}
</li>
</ul>
`,
animations: [
trigger('flyInOut', [
state('in', style({transform: 'translateX(0)'})),
transition('void => *', [
animate(300, keyframes([
style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
style({opacity: 1, transform: 'translateX(15px)', offset: 0.3}),
style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
]))
]),
transition('* => void', [
animate(300, keyframes([
style({opacity: 1, transform: 'translateX(0)', offset: 0}),
style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
]))
])
])
]
})
export class App {
heroes: any[] = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India'];
next: number = 0;
staggeringHeroes: any[] = [];
constructor(){
this.doNext();
}
doNext() {
if(this.next < this.heroes.length) {
this.staggeringHeroes.push(this.heroes[this.next++]);
}
}
removeMe(i) {
this.staggeringHeroes.splice(i, 1);
}
}
為了使用 angular2 動畫,我為迭代項設置了一個 state 屬性,然后為 mouseover 和 mouseout 函數設置了一個切換函數。 這樣每個項目都封裝了它的動畫狀態,然后我可以根據需要更改它
<li
*ngFor="let item of itemsList"
(mouseover)="toogleAnimation(item)"
(mouseout)="toogleAnimation(item)"
>{{ item.name }}
<div class="animation_wrapper" [@slideInOut]="item.state">
<span class="glyphicon glyphicon-refresh"></span>
<span class="glyphicon glyphicon-trash"></span>
</div>
</li>
您想要什么,列表中每個項目之間的時間,請參閱此代碼。 將文件 .css 更改為 .scss
像這樣https://codepen.io/jhenriquez856/pen/baPagq
$total-items: 5; body { font-family: sans-serif; background: #111; color: #fff; } ul { width: 300px; left: 50%; margin-top: 25px; margin-left: -150px; position: absolute; } li { position: relative; display: block; border: 1px solid hotpink; margin-bottom: 5px; padding: 10px; text-align: center; text-transform: uppercase; animation: fadeIn 0.5s linear; animation-fill-mode: both; } // Set delay per List Item @for $i from 1 through $total-items { li:nth-child(#{$i}) { animation-delay: .25s * $i; } } // Keyframe animation @-webkit-keyframes fadeIn { 0% { opacity: 0; } 75% { opacity: 0.5; } 100% { opacity: 1; } }
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.