CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangularjs-animation
Michael Tempest
Michael Tempest

Reputation: 834

ngAnimate with ui-view

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));
}

Upvotes: 2

Views: 3080

Answers (3)

Ivar
Ivar

Reputation: 4891

For me it actually ui-view started to animate only after update to angular-ui-router to 0.2.8 and I followed existing example from angular-ui FAQ link to plunkr.

My bower config:

"dependencies": {
    "angular": "~1.2",
    "angular-ui": "~0.4",
    "angular-ui-router": "0.2.8-bowratic-tedium",
    "angular-animate": "~1.2",
    ....
}, ...

that 0.2.8-bowratic-tedium is a 0.2.8 angular-ui fix for bower as 0.2.8 version does not include release files.

Upvotes: 0

mlim1972
mlim1972

Reputation: 248

You need to us the ng-animate attribute:

<div ui-view ng-animate="'slideanim'">

Note the single quotes inside the double quotes. Here is the fiddle from ui-router faq section.

Upvotes: 0

cheekybastard
cheekybastard

Reputation: 5735

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"

Upvotes: 3

Related Questions