我需要在填充和显示 ngFor
列表时对其进行动画处理。每个元素都应该有一个过渡,比方说 something like this .
我该怎么做?
最佳答案
它有一些问题,因为 ngFor
做了一些多余的添加/删除,导致项目被动画化,这不应该:
import {Component} from 'angular2/core';
import { Component, Directive, OnDestroy, Input } from 'angular2/core';
@Component({
selector: 'my-app',
template: `<div (click)="$event.preventDefault()">
<button type="button" (click)="pushItem()">Push</button>
<button type="button" (click)="removeItemLast()">Remove Last</button><br/>
<button type="button" (click)="unshiftItem()">Unshift</button>
<button type="button" (click)="removeItemFirst()">Remove First</button><br/>
<ul>
<li class="my-animation" *ngFor="#item of items">
{{item.title}}
</li>
</ul>
</div>`
})
export class AppComponent {
private count:number = 1;
public items: Array<any>;
constructor() {
console.clear();
this.items = [];
this.items.push(this.newItem());
this.items.push(this.newItem());
}
pushItem() {
this.items.push(this.newItem());
},
removeItemLast() {
if(this.items.length > 0) this.items.splice(this.items.length - 1, 1);
},
unshiftItem() {
this.items.unshift(this.newItem());
},
removeItemFirst() {
if(this.items.length > 0) this.items.splice(0, 1);
},
newItem() {
return {title: 'Item' + this.count++};
}
}
@keyframes MyAnimation {
0% {
padding-left: 100px;
}
100% {
padding-left: 0px;
}
}
.my-animation {
animation: MyAnimation 1s;
}
Plunker example (RC.x) 来自 https://github.com/angular/angular/issues/7239演示了这个问题。
更新
这个问题很久以前就解决了
关于angular - 如何在 Angular 中为 *ngFor 设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37217314/