CODEWITHSUNDEEP
cssangularjsanimation
kosmo
kosmo

Reputation: 165

Angularjs ng-view animation does not add ng-enter class on first change - missunderstanding, bug, workaround?

I have checked that in developer tools, the classes are simply not added during first time animation to the entering view.

My question is: Is this supposed to happen and I should add something more than ng-view directive or is it a bug and I should look for a workaround?

HTML:

<div ng-view></div>

CSS:

div[ng-view].ng-enter, div[ng-view].ng-leave {
    -webkit-transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s;
    -webkit-transform: translateZ(0);
}
div[ng-view].ng-enter {
    -webkit-transform: translateX(100%);
}
div[ng-view].ng-enter-active {
    -webkit-transform: translateX(0);
}
div[ng-view].ng-leave {
    -webkit-transform: translateX(0);
}
div[ng-view].ng-leave-active {
    -webkit-transform: translateX(-100%);
}

That is actually all information I can provide. I have checked that all events are fired properly and there is nothing I can do wrong because there is no actual code I have written myself except for the CSS styles. After first $location.path() or href click css classes like ng-leave and ng-leave-active are added to the old view, but ng-enter and ng-enter-active are not added to the new view. After that first occurance everything works as expected.

Upvotes: 2

Views: 3508

Answers (1)

arthurmchr
arthurmchr

Reputation: 510

It looks that it's now (since version 1.2.3) the normal way to go.

Animations are not played on bootstrap as explained here : https://github.com/angular/angular.js/issues/5130

Several topics are asking for a solution, like this : Enter animation not playing in Angular

Upvotes: 1

Related Questions