每個元素的角度分離動畫

我編寫了這段代碼，但它像組合一起動畫組件中的所有對象，但是我想要動畫* ng中的所有元素一個接一個，開始顯示第一個，之後1秒等等。 ..每個元素的角度分離動畫

角版本：4.2.5

這裏是我的代碼：

在組件：

<div *ngFor="let item of posts; index as i" class="col-lg-4" [@flyInOut]> 
    <img class="rounded-circle" src="{{featuredmedias[i]}}" alt="Generic placeholder image" width="160" height="160"> 
    <h2>{{item.title.rendered}}</h2> 
    <p>{{item.excerpt.rendered | removeParagrapHtmlTags}}</p> 
    <p><a class="btn btn-secondary" routerLink="\{{item.slug}}" role="button">View details &raquo;</a></p> 
</div><!-- /.col-lg-4 -->

中的.ts文件：

animations: [ 
trigger('flyInOut', [ 
    transition('void => *', [ 
    style({transform: 'translateY(100%)'}), 
    animate('0.9s ease-in') 
    ]) 
])

]

來源

2017-07-11 Saeid Ostad

嘗試將它們添加一個接一個，而不是一次

在組件

public index: number = 0; 

constructor() { 
    this.addNext(); 
} 

addNext() { 
    if(this.index < this.posts.length) { 
    this.showPosts = this.showPosts.concat([this.posts[this.index++]]); 
    } 
}

HTML

<div *ngFor="let item of showPosts; index as i" class="col-lg-4" (@flyInOut.done)="addNext()" [@flyInOut]>

來源

2017-07-11 15:11:14

謝謝。有用：） –

根據文檔，您應該使用動畫DSL中的交錯功能：https://angular.io/api/animations/stagger

這是來自文檔，因爲SO不喜歡獨立的答案。

在下面的例子中，有一個容器元素包裝了一個由ngFor標記的項目列表。容器元素包含一個動畫觸發器，稍後將被設置爲查詢每個內部項目。

<!-- list.component.html --> 
<button (click)="toggle()">Show/Hide Items</button> 
<hr /> 
<div [@listAnimation]="items.length"> 
    <div *ngFor="let item of items"> 
    {{ item }} 
    </div> 
</div>

Cmoponent代碼

import {trigger, transition, style, animate, query, stagger} from '@angular/animations'; 
@Component({ 
    templateUrl: 'list.component.html', 
    animations: [ 
    trigger('listAnimation', [ 
     //... 
    ]) 
    ] 
}) 
class ListComponent { 
    items = []; 

    showItems() { 
    this.items = [0,1,2,3,4]; 
    } 

    hideItems() { 
    this.items = []; 
    } 

    toggle() { 
    this.items.length ? this.hideItems() : this.showItems(); 
    } 
}

實際動畫代碼

trigger('listAnimation', [ 
    transition('* => *', [ // each time the binding value changes 
    query(':leave', [ 
     stagger(100, [ 
     animate('0.5s', style({ opacity: 0 })) 
     ]) 
    ]), 
    query(':enter', [ 
     style({ opacity: 0 }), 
     stagger(100, [ 
     animate('0.5s', style({ opacity: 1 })) 
     ]) 
    ]) 
    ]) 
])

來源

2017-07-11 15:19:44

每個元素的角度分離動畫

回答

相關問題