transition 在 IOS 8.1下 transition

问题描述

在使用 transition 的时候，在 iphone6、 IOS8.1 下面动画的过渡效果没有了，动画卡顿，在 Chrome 或者其他机型下面均是可以的。具体的代码如下

<div class="record-wrap"
      :style="{
      transition: recoredTransform ? `transform ${recoredTransformTime}ms ease-in-out` : 'none',
      transform: `translateY(-${recoredTransformY * 32}px) translateZ(0)`,   
}"></div>

问题解决过程

自己认为是硬件加速的问题，做了以下的尝试

尝试的第一种方法

给它们加了相关的前缀。但实际上在 Vue 项目中，这个是有点多余的。因为，Vue 在行内样式的时候，会自动帮类似 transform的属性加上浏览器前缀，类似 -webkit- 等。

第一种方法，卒！

尝试的第二种方法

transform: translateZ(0)
或者

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

参考

没有成功，卒！

尝试的第三种解决方法

transform-style: preserve-3d;  

第三种解决方法，卒！

正确的解决方法

Old versions of iOS Safari support only vendor-prefixed properties and values for transition and transform, so you should use-webkit-transition: -webkit-transform instead -webkit-transition: transform

没错，就只需要将 -webkit-transition: transform 替换成 -webkit-transition: -webkit-transform 即可。

参考

反思：

• 以后直接用谷歌搜，而不是在 stackoverflow 中搜
• 在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。

参考：
CSS3动画卡顿性能优化解决方案