Question

我有一些div的位置（顶部和左侧值）随JavaScript快速变化。这些变化以1px为增量，但我希望这些变化是平滑的 - 1px增量对于我的喜好来说太过于锯齿。我尝试使用动画时间非常短的CSS转换（例如.1s），但它仍然有点跳跃，并且在转换动画完成之前位置仍然可以改变。

有没有办法让这些变化变得平滑？

Answer 1

我不知道它是否可以提供帮助，但我可能会尝试使用＆＃39; em＆＃39;单位（px的instad）所以你可以使用少于1px的值（至少它通常适用于文本大小，例如）。此外，不要使用上/下属性进行过渡。相反，请使用translate3d＆gt;它会做同样的工作，但通常更好更快（触发硬件加速）。一些可以提供帮助的scss mixins：

@mixin single_transition($property:all, $speed:300ms, $ease:ease-out) {
  -webkit-transition: $property $speed $ease;
  -moz-transition: $property $speed $ease;
  transition: $property $speed $ease;
}

@mixin remove_transition{
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

@mixin translate($x:0, $y:0){
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}

@mixin translate3D($x:0, $y:0, $z:0){
  -webkit-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}

@mixin remove_translate{
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}

通常，我同时应用translate和translate3D，因此在可用的情况下，将使用translate3d，否则翻译。无论如何，translate3d目前得到了很好的支持。

希望它有所帮助！

编辑：

如果你没有成功地做你想做的事情，你也可以试着用一些动画库来获得它。目前我认为最好的一些是：

http://daneden.github.io/animate.css/

http://julian.com/research/velocity/

http://lvivski.com/anima/

http://greensock.com/（付费）