typescript Angular 2 动画 *ngFor 列表项一个接一个地使用 RC 5 中的新动画支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38085837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 animate *ngFor list item one after other using new Animation support in RC 5
提问by Naveed Ahmed
I have a component that fetches list of items from server and then display that list using *ngFor in template.
我有一个组件从服务器获取项目列表，然后在模板中使用 *ngFor 显示该列表。
I want the list to be displayed with some animation, but one after other. I mean each list item should animate in after other.
我希望列表显示一些动画，但一个接一个。我的意思是每个列表项都应该在另一个列表项中设置动画。
I am trying something like this:
我正在尝试这样的事情：
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;
}
and in my list component template I am using it like:
在我的列表组件模板中，我像这样使用它：
<ul>
<li *ngFor="let item of list;">
<list-item [item]="item"></list-item>
</li>
</ul>
What it does is displays whole list at once. I want items to enter one by one with some animation.
它所做的是一次显示整个列表。我希望项目通过一些动画一个一个地进入。
回答by Ankit Singh
I couldn't find staggersupport on ngForin the documentation, but
there's now animation.doneevents, which can be used to make staggering ngFor
我在文档中找不到stagger支持ngFor，但现在有animation.doneevents，可用于制作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);
}
}
回答by jredd
To use the angular2 animations I set a state property to the iterated item and then just setup a toggle function for the mouseover and mouseout functions. This way each item encapsulated it's animated state and then I could change it as needed
为了使用 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>
回答by Jhonnathan Henriquez
what you want, of the time between each item in the list, see this code. change the file .css to .scss
您想要什么，列表中每个项目之间的时间，请参阅此代码。将文件 .css 更改为 .scss
like this https://codepen.io/jhenriquez856/pen/baPagq
像这样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>