新渲染元素的動畫，但不是頁面加載

我訂閱了Firebase實時數據庫，因此當我向其提交內容時，它立即在視圖中呈現，而不需要任何jQuery或ajax。新渲染元素的動畫，但不是頁面加載

我想動畫渲染這些元素，以便當一個新元素被添加到DOM時，它的div的background-color是綠色的並且慢慢消失。我不想要的是該類的所有div在加載時執行此動畫。

我知道該怎麼做了前者：

@keyframes green-fade { 
    0% {background: rgb(173, 235, 173);} 
    100% {background: none;} 
} 

.post-div { 
    animation: green-fade 5s ease-in 1; 
}

但是，當然，這部動畫發生此類它的渲染，包括負載的任何時間。

我很感興趣的是「Angular 2 way」來做到這一點。

來源

2017-03-17 J. Adam Connor

由於角4.25有做到這一點更簡單的方法：如果你想抑制：在視圖初始化進入動畫，只需用下面的動畫把它包：

template: ` 
    <div [@preventInitialChildAnimations]> 
    <div [@someAnimation]>...</div> 
    </div> 
`, 
animations: [ 
    trigger('preventInitialChildAnimations', [ 
    transition(':enter', [ 
     query(':enter', [], {optional: true}) 
    ]) 
    ]), 
    ... 
]

來源

2017-09-12 23:06:58

這對我來說是正確的答案。謝謝！ – IRCraziestTaxi

更新了接受的答案，因爲它解決了當前的Angular版本。 –

在角4.2.4中對我不起作用，動畫仍然在頁面加載時發生 – Vignesh

添加一個觸發器，用於檢查物品通過網絡時的狀態。我在這裏觸發動畫時itemState是new。

trigger('itemState', [ 
 
     transition('* => new', animate(5000, keyframes([ 
 
     style({ backgroundColor: 'red', offset: 0 }), 
 
     style({ backgroundColor: '*', offset: 1.0 }) 
 
     ]))),

給你觸發到您的項目的狀態的參考，並將其設置爲空時，在動畫完成。

<div [@itemState]="someItem.itemState" (@itemState.done)="someItem.itemState=''">

一定要一個itemState屬性添加到您的文章，讓你可以標記他們如新！

來源

2017-03-17 02:15:39

如果你沒有使用某種類型的本地數據存儲，那麼你必須在itemState.done上進行API調用。例如：'（@ itemState.done）=「someApiCall（）'將項目狀態設置爲null或在API級別設置「old」，並在本地設置爲「old」或「null」。 –

是的，我想我只是做數據庫調用。再次，我使用的是AngularFire，因此數據庫中項目狀態的更改實時反映出來。 –

這當然只會在用戶瀏覽頁面時向用戶顯示動畫。嗯，也許是經過一段時間後API調用的東西？ –

您可以使用生命週期鉤子AfterViewInit在初始視圖渲染完成後激活動畫。

https://embed.plnkr.co/5l1kf5lMLEXSE8pNzqik/

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let item of items" [@greenFade]="animate ? 'in' : null"> 
     {{item}} 
    </div> 

    <button (click)="addItem()">add</button> 
    `, 
    animations: [ 
    trigger('greenFade', [ 
     transition('void => in', [style({background: 'rgb(173, 235, 173)'}), animate('5s ease-in')]) 
    ]) 
    ] 
}) 
class App implements AfterViewInit { 
    constructor(private cdRef: ChangeDetectorRef){} 

    items: String = ['Item','Item','Item']; 
    addItem(){ 
    this.items.push('Item'); 
    } 

    animate: boolean; 
    ngAfterViewInit(){ 
    this.animate = true; 
    this.cdRef.detectChanges(); 
    } 
}

來源

2017-03-25 14:00:11

每次渲染視圖都不會觸發動畫嗎？ –

是什麼讓你這麼想？當@ GreenFade屬性從void變爲'in'時，每個項目的動畫被觸發，換句話說：如果它的第一個值是'in'。這隻發生一次。對於初始項目，它根本不會發生。他們從void變爲null，然後從null變爲'in'。 –

哦，你是對的！讓我看看這個與接受的答案相比的好處。我認爲當然最明顯的是，這不需要在後端設置任何值。我想這取決於你的用例。 –

新渲染元素的動畫，但不是頁面加載

回答

相關問題