ngAnimate with ui-view

Question

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

score 3 · Answer 1 · answered Dec 12 '13 at 02:09

3

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"

answered Dec 12 '13 at 02:09

cheekybastard

5,535
3
22
26

Still doesn't work, I've updated angular to match and added the class. It still just directly loads the next state, doesn't ever load side by side or add the ng-enter ng-leave classes – Michael Tempest Dec 12 '13 at 10:48
I've had some css animation libraries not work with ui-router, but I do know animations work with ui-router with css from https://github.com/Augus/ngAnimate/ – cheekybastard Dec 12 '13 at 12:14
I don't use css animation libraries. Do you have a working example? I've seen raised bugs with ui-view and ngAnimate so trying to see if anyone has a workaround. – Michael Tempest Dec 12 '13 at 13:34
@MichaelTempest Have you since heard of or know a solution. This is driving me mad. – Kiee Jan 24 '15 at 10:14
@Kiee, unfortunately I haven't had the need since this project, we did get a workaround by sorting the module out ourselves but I no longer work at said company to strip it out for you. sorry I can't be of more help – Michael Tempest Jan 27 '15 at 09:00
@MichaelTempest thanks for the reply, I found a solution to my issue it was to wait on `$viewContentLoaded` then set a franction `$timeout` before adding the data to the variable for some reason ng-enter doesnt fire on load – Kiee Jan 27 '15 at 09:11

score 0 · Answer 2 · answered Dec 12 '13 at 23:57

0

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.

answered Dec 12 '13 at 23:57

mlim1972

203
1
3
8

2

Unfortunately that is using an older version of angular than we are, angular animate is no longer bundled – Michael Tempest Dec 13 '13 at 09:07

score 0 · Answer 3 · answered Feb 18 '14 at 23:06

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.

ngAnimate with ui-view

3 Answers3