ngAnimate with ui-view

advertisements

I am having major problems with getting ngAnimate to work with ui-view. The classes never get applied. Please help:

bower.json

"angular": "1.2.0-rc.2",
"angular-resource": "1.2.0-rc.2",
"angular-ui-router": "0.2.5",
"angular-ui-utils": "~0.0.4",
"angular-animate": "1.2.4",

index.html

<body ng-app="ivy" ng-controller="transitionCtrl">
    <section ui-view></section>
</body>

Controller

angular.module('ivy.transition.controllers.transitionCtrl', ['ngAnimate', 'ui.router'])

.controller('transitionCtrl', ['$scope', function ($scope) {
  $scope.$on('$stateChangeSuccess', function (event, toState) {
    console.log('transitioning to ', event, toState);
  });
}]);

SASS

.ng-enter,
.ng-leave {
  @include vendor(transition, all 5s ease-out);
}

.ng-leave {
  @include vendor(transform, translate3d(100%,0,0));
}

.ng-enter {
  @include vendor(transform, translate3d(-100%,0,0));
}


In the index.html just add class='my-css-animation' beside ui-view, example:

    <section ui-view class='my-css-animation'></section>

Also, angular-animate should match your angular version number. An angular.js "1.2.4" works with angular-animate.js "1.2.4"