我有一个组件,它从服务器获取项目列表,然后在模板中使用*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>
它的作用是一次显示整个列表。
我在文档中找不到stagger
对ngFor
的支持,但是现在有了animation.done
events
,可以用来生成 staggering ngFor
StackBlitz
@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>