使用变换制作动画时AngularJs动画不一致

Question

我设置了一个 AngularJS 动画，用于使用最新版本的 Angular (1.2.9) 在 ng-switch 指令的面板中滑动。如果我尝试使用“transform: translate(0,0);”为位置设置动画，我会注意到奇怪的行为而不仅仅是“左”属性。使用翻译时，动画有时可以正常工作，有时不能正常工作（我会说大约是 50/50）。但是，如果我为 left 属性设置动画，它 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/

我想使用 translate，因为它提供的性能比在移动设备上为 left 属性设置动画要好得多。我有什么问题吗，这是 Angular 中的一个错误，还是我应该放弃并只使用“left”进行动画处理？

Answer 1

我认为这是一场渲染时间竞赛 - 由 125% 引起。我认为它在渲染之前不知道 125% 是什么，我以前见过类似的事情。

为了论证，我在这里将所有 % 替换为 px 等效项：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.*/

我确定您更愿意使用 % 值，但我希望它在任何情况下都会有所帮助。