如何通过angular2中的动画显示div？

Question

我有一个分享图像，其中显示Div，其中包含Facebook和Twitter共享选项，但我希望这个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>

Answer 1

您可以查看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;
}