ngAnimate ng-leave class not added when changing the state

Question

I'm using UI-Router and trying to implement ngAnimate module animations.

ng-enter works fine. But, I don't see ng-leave being added to the DOM. I understand that class will be added temporarily and removed, but it didn't.

I'm using AngularJS 1.4.7 and UI Router v0.2.15

Here's my code:

index.html

    <div class="row">
            <form class="form-horizontal form-left" name="formProfile" novalidate ng-controller="profileController">
                    <fieldset>
                        <div id="form-views" ui-view></div>
                    </fieldset>
                </form>
    </div>

View1.html (This is default view that will be loaded into index.html)

<p>View 1 State</p>
<a class="btn btn-sm btn-primary btn-block btn-cm" ui-sref="create.view2">Next</a>
<div ui-view></div>

View2.html

 <p>View 2 State</p>
 <a class="btn btn-sm btn-primary btn-block btn-cm">Finish</a>

app.js

    angular.module('profileModule',['ui.router', 'ngAnimate']);

    angular.module('profileModule').run(['$state',function($state){
    $state.go('create');
    }]);

    angular.module('profileModule').config(['$stateProvider','$locationProvider',function($stateProvider,$locationProvider){
        $stateProvider.state('create', {
            url:'/create',
            templateUrl: 'view1.html',
            controller: 'profileController'
        });

        $stateProvider.state('create.view2', {
            url:'/view2',
            templateUrl: 'view2.html',
        });
        }]);

Any suggestions why ng-leave is not being added to <div id="form-views" ui-view></div> when create.view2 state is being loaded?

I may be missing something here, but why is it important that ng-leave is added to the DOM? — Ravvy, Nov 20 '15 at 22:16
In order to apply the animation, that class will be added by ngAnimation module while the dom being loaded. — Venkat, Nov 20 '15 at 22:27

score 0 · Accepted Answer · edited May 23 '17 at 12:15

Is your version of ng-animate 1.4.7 as well?? You did not post your CSS. I believe you need to do this to help debug. If you could post a plunker of your issue that would really help.

Also if you have not review the animate classNameFilter as it will help speed up your site by only applying animations to defined classes.

$animateProvider.classNameFilter(/animate|ng-toast/);

Here is my CSS and I use the same angular, ng-animate and ui-router:

This plunker / answer gives a great solution:

http://plnkr.co/edit/NsZhDL?p=preview

How can I use ng-animate with ui-view rather than ng-view?

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1;
  /*padding-left: 0px;*/  
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  /*padding-left: 100px;*/
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}

I changed the layout of code similar to that plunker and it works fine. — Venkat, Nov 21 '15 at 00:01

ngAnimate ng-leave class not added when changing the state

1 Answers1