CODEWITHSUNDEEP
javascriptangularjscss-animationsng-animate
JT703
JT703

Reputation: 1311

Animate the appending of HTML to an element in Angular

I have a directive that appends a chuck of html to an element in the DOM after the user clicks a button. What's the best way to animate this chuck of HTML as it gets rendered?

The enter and leave events don't seem to work on this because I am appending using element.append(myHtmlChunk);

Any ideas?

Upvotes: 0

Views: 1038

Answers (1)

Erik Honn
Erik Honn

Reputation: 7576

The animations in angular won't work since you are outside Angulars normal DOM manipulation. If you wanted to use it you could use ng-switch or ng-show/hide etc to show the html instead, but I am assuming there is a good reason for inserting it directly.

Still, the basic idea of the angular animations still stand, just use css transitions. Insert the element with the initial class and then update it right away to the final class. So if you wanted to do a fade in then you would spawn the element with a class that gives opacity 0 and then immediately set it to a class with opacity 1. And give the class a transition as well of course. Then watch it fade in.

Upvotes: 1

Related Questions