ngAnimate with ui-view

Question

ngAnimate with ui-view

3k views Asked by Michael Tempest At 12 September 2024 at 17:45

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

Original Q&A

There are 3 answers

**cheekybastard** · Answer 1 · 2013-12-12 02:09:54

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"

**mlim1972** · Answer 2 · 2013-12-12 23:57:53

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.

**Ivar** · Answer 3 · 2014-02-18 23:06:56

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.

TechQA.

ngAnimate with ui-view

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULAR-UI-ROUTER

Related Questions in ANGULARJS-ANIMATION

Popular Questions

Popular Tags

Trending Questions