анимация AngularJs несовместима при анимации с использованием преобразований

Question

У меня есть анимация AngularJS, настроенная для раздвижения панелей директивы ng-switch с использованием последней версии Angular (1.2.9). Я замечаю любопытное поведение, если пытаюсь анимировать позицию, используя «transform: translate (0,0)»; вместо атрибута «left». При использовании перевода, анимация иногда работает правильно, а иногда нет (я бы сказал, что это около 50/50). Однако, если я одушевляю левый атрибут, он работает правильно 100% времени.

CSS-для анимации я использую это

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

Вот скрипка, чтобы продемонстрировать этот вопрос я, имеющий: http://jsfiddle.net/HXACU/5/

Я хотел использовать перевод, потому что это дает значительно лучшую производительность, чем анимировать левый атрибут на мобильных устройствах. У меня что-то не так, это ошибка в Angular, или я должен сдаться и просто оживить «левым»?

Answer 1

Я думаю, что это гонка времени рендеринга, вызванная 125%. Я не думаю, что он знает, что такое 125%, пока оно не будет показано, я видел подобные вещи раньше.

Для аргументов пользы я заменил все% с РХ эквивалентами здесь: http://jsfiddle.net/27te5/1/ и оказывается более устойчивым (я не могу сломать)

.slide-animation, .slide-animation-transform { 
    width: 96px; 
} 
.slide-animation.RL.ng-enter, .slide-animation.LR.ng-leave.ng-leave-active { 
    left:150px; 
} 
/*etc. etc.*/ 

Я уверен, что вы бы скорее% значения, но я надеюсь, что это поможет в любом случае.