为什么用 transform 做动画还是会卡顿？
我最近在 Vue 里做一个拖拽卡片的效果，为了性能特意用了 transform 来做位移，但快速拖动时还是明显掉帧。网上都说 transform 不会触发重排，应该很流畅才对，是不是我哪里写错了？
我试过把 will-change: transform 加上，也用了 requestAnimationFrame，但效果不明显。下面是我简化后的代码：
<template>
<div
class="card"
:style="{ transform: translate(${x}px, ${y}px) }"
@mousedown="startDrag"
>
拖我
</div>
</template>难道是频繁更新响应式数据导致的？求指点！
- 2
回答
4浏览
为什么用 transform3d 做移动端动画会卡顿？
我在做移动端的滑动菜单，用了 transform: translate3d(0, 0, 0) 来开启硬件加速，但动画还是有点卡，尤其在低端安卓机上。 我试过加 will-change: transfo...
- 2
回答
25浏览
为什么给元素加了transform后合成层没生效还卡顿？
最近在优化页面滚动动画，给元素加了transform: translateZ(0)想触发合成层，但实际测试时发现页面还是卡顿。用Chrome的Layer仪也没显示"composited"标记。 我的结...
- 2
回答
106浏览
移动端CSS动画使用transform时为何仍有卡顿？
大家好，我在给移动端H5页面添加轮播图平移动画时遇到了问题。我用了transform: translateX，但滑动时偶尔还是会卡顿。我尝试过把动画属性写在will-change里，也设置了trans...
- 1
回答
24浏览
浏览器渲染层合成时为什么我的CSS transform失效了？
我在做一个卡片翻转动画，本地测试好好的，但放到项目里就完全不动了。控制台也没报错，就是transform没生效，怀疑是不是和浏览器的合成层机制有关？ 我写的CSS大概是这样： .card { tran...
- 2
回答
57浏览
移动端transform动画出现元素抖动是怎么回事？
在给移动端H5页面添加图片缩放动画时，用transform: translate(scale)做了缩放，但运行时元素边缘会出现1-2帧的抖动。已经试过加will-change: transform和设...
- 1
回答
22浏览
移动端手势滑动动画卡顿如何优化？
我在用CSS transform实现图片拖拽缩放时，手指滑动动画特别卡顿，尤其是在安卓低版本机型上。尝试过给元素加will-change: transform和用requestAnimationFra...
- 2
回答
39浏览
移动端动画用transform还是opacity过渡更流畅？
最近在做移动端列表项的点击反馈动画，用opacity从1变0.5做半透明效果，但滑动列表时明显卡顿。试过改用transform的translateY(2px)位移动画反而流畅很多，这是为什么呢？ 我写...
- 2
回答
61浏览
移动端滚动回弹动画卡顿怎么解决？
我在给移动端页面做滚动回弹效果时，用CSS transform叠加过渡动画，但滚动到底部回弹时总出现卡顿，特别是在快速滑动后突然松手的情况。尝试过给容器加overscroll-behavior: co...
- 2
回答
117浏览
为什么用了translateZ后页面滚动还是卡顿？
我在做一个带复杂动画的页面，给元素加了transform: translateZ(0)想触发GPU加速，但滚动时还是卡顿。用Chrome的Layer仪表盘看了下，发现只有部分元素显示为composit...
- 1
回答
135浏览
移动端加载动画卡顿，怎么优化都不行怎么办？
我在写一个旋转的加载动画组件，用CSS transform旋转的三个圆点，但在iPhone XR上明显卡顿。代码是这样的： .loader span { display: inline-block; ...
虽然
transform本身不触发重排，性能很好，但你每次修改x和y，Vue 都要进行依赖收集、触发 Virtual DOM 的 diff 计算，甚至可能引发组件的局部重渲染。鼠标移动事件一秒触发几十上百次，Vue 的响应式开销累加起来就成了性能杀手。解决方案很简单：在拖动过程中，直接操作 DOM，绕过 Vue 的数据响应式系统。等拖动结束了，再同步数据状态。
试试这个改法：
这么改之后，拖动过程中完全绕过了 Vue 的更新机制，只走原生 DOM API，流畅度立马就不一样了。
will-change和requestAnimationFrame其实属于锦上添花，响应式数据频繁更新这个根本问题不解决，加再多优化手段也没用。