Question

我使用最新版本的Angular（1.2.9）设置了一个AngularJS动画，用于在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);
}

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

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

Answer 1

我认为这是一场渲染时间比赛 - 由125％引起。我不知道它知道什么是125％，直到它被渲染，我以前见过类似的东西。

对于参数sakes我在这里用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.*/

我确定你宁愿％值，但我希望它在任何情况下都有帮助。

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

1 个答案: