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

Question

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

这是一个演示我遇到的问题的 fiddle :http://jsfiddle.net/HXACU/5/

我想使用翻译，因为它比在移动设备上为左属性设置动画效果要好得多。我有什么问题吗，这是 Angular 中的错误，还是我应该放弃并只使用“左”动画？

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.*/

我确定您更喜欢 % 值，但我希望它在任何情况下都有帮助。