如何通過動畫在angular2中顯示div？

我有一個共享圖像點擊其中出現一個包含Facebook和Twitter分享選項的Div，但我希望這個Div出現一些衰落的動畫。如何通過動畫在angular2中顯示div？

這裏是我的HTML代碼： -

<img class="like_2" alt="image" (click) = "shareIt(i)" src="assets/img/Fwd Icons/share.png"> 
<div class="row" *ngIf="sharing==i"> 
    <section class="widget"> 
     <share-buttons (click) = "closeShareIt(i)" [url]=" myFeed.contentUrl " 
      [count]="false" 
      [totalCount]="true" 
      [defaultStyle]= "true" 
      (popUpClosed) = "true" 
      [google]="googleInner" 
      [pinterest]="false" 
      [linkedIn]="false" 
      [tumblr]="tumblrInner" 
      [reddit]="false" 
      [stumbleUpOn]="false"> 
     </share-buttons>     
    </section> 
</div>

來源

2017-02-21 Utkarsh Gautam

請參閱http://stackoverflow.com/a/42246895/217408，http://stackoverflow.com/questions/37217314/how-can-i-animate-ngfor-in-angular-2/37217476#37217476，https： //angular.io/docs/ts/latest/guide/animations.html –

我有凝灰岩時間執行任何這些.. –

你可以看一下在Angular2動畫文檔。

https://angular.io/docs/ts/latest/guide/animations.html

不過，如果你正在尋找的東西真的很容易做到那麼就使用這樣的事情..

<div [ngClass]="{'animator': gogogo}" class="myel">i will animate</div>

然後在組件類..

gogogo=false; 

ngOnInit() { 
    setTimeout(() => { 
    this.gogogo=true; 
    }, 1000); 
}

然後在你的CSS ..

.myel { 
    opacity:0; 
} 

.myel.animator { 
    opacity:1; 
    transition:opacity 2s ease-in; 
}

來源

2017-03-26 03:33:11 danday74

如何通過動畫在angular2中顯示div？

回答

相關問題