When implementing an AngularJS animation to slide in panels of an ng-switch directive using the latest version of Angular (1.2.9), I encountered some interesting behavior when trying to use "transform: translate(0,0);" instead of just the "left" attribute for positional animation. It seems that when using translate, the animation works correctly only about half of the time. However, if I stick to animating the left attribute, it always works perfectly 100% of the time.
Below is the CSS code for the animation:
.slide-animation.ng-enter,
.slide-animation.ng-leave {
position: absolute;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
-o-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
.slide-animation.ng-enter {
-webkit-transform: translate(-125%, 0);
-ms-transform: translate(-125%, 0);
transform: translate(-125%, 0);
}
.slide-animation.ng-enter.ng-enter-active,
.slide-animation.ng-leave {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide-animation.ng-leave.ng-leave-active {
-webkit-transform: translate(125%, 0);
-ms-transform: translate(125%, 0);
transform: translate(125%, 0);
}
To see a demonstration of this issue, you can view the fiddle here: http://jsfiddle.net/HXACU/5/
I initially wanted to use translate due to its better performance on mobile devices compared to animating the left attribute. However, considering the inconsistency of the animation, I am now unsure if there is an error in my implementation, a bug within Angular, or if I should simply resort to animating with "left." Any insights on this matter would be greatly appreciated!