How to make a div appear through animation in angular2?

Question

I have a share image on click of which a Div appears which contains facebook and twitter sharing options but i want this Div to appear with some fading animation.

Here is my HTML code:-

<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>

See 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 — Günter Zöchbauer, Feb 21 '17 at 10:01

score 0 · Accepted Answer · answered Mar 26 '17 at 03:33

You can look at the Angular2 animate docs.

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

However, if you are looking for something really easy to do then just use something like this ..

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

then in your component class ..

gogogo=false;

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

then in your css ..

.myel {
  opacity:0;
}

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

How to make a div appear through animation in angular2?

1 Answers1