AngularJS slideDown or slideUp on ng-if

First massive angular roadblock.

I needed to use an ng-if due to many directives needing initialization on demand (most directives assume DOM is visible for calculating offsets, sizes), but all solutions I’ve encountered online did not work with ng-if. They typically work with ng-show, but not ng-if.

The problem ended out to be simple: ng-if can be used with ng-animate using a custom JS animation which triggers enter and leave animations which provide you the element being animated at exactly the right moments.

Add the below to your project to understand all the animation hooks firing upon an ng-if element becoming visible.

<div ng-if=”isVisible” class=”my-crazy-animation”>
Ng-If Block

app.animation('.my-crazy-animation', function() {
return {
enter: function(element, done) {
//run the animation here and call done when the animation is complete
return function(cancelled) {
//this (optional) function will be called when the animation
//completes or when the animation is cancelled (the cancelled
//flag will be set to true if cancelled).
leave: function(element, done) {

Who knew it would be so easy. I’ve spent literally 4+ hours on this with multiple solutions. CSS based, JS based directives which don’t fire in correct priority for ng-if, all solved by this one liner. Incredible!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s