html鼠标在ie上抖动,IE下CSS3动画抖动

问题记录：IE11中执行淡入动画时出现抖动效果，效果如下：

抖动.gif

解决此问题需理解一些概念：

重排：重新生成布局

重绘：重新绘制

注意：重排必定导致重绘，重绘不一定需要重排；比如改变背景色，就只会触发重绘

原始代码：

// >>>>> js部分 <<<<<

listEl.show();

timer = requestAnimationFrame(function () {

listEl.removeClass('out').addClass('in');

})

// >>>>> css部分 <<<<<

.dropDown_list.in {

animation-name: in;

animation-duration: 2s;

animation-fill-mode: both;

}

@keyframes in {

0% {

opacity: 0;

filter:alpha(opacity=0);

transform-origin: 0% 0%;

transform: scaleY(0.8);

}

100% {

opacity: 1;

filter:alpha(opacity=100);

transform-origin: 0% 0%;

transform: scaleY(1);

}

}

执行步骤：

点击按钮，控制 ul 标签 display 属性让其显示

给ul标签追加 in 类名，让其 opacity 从0到1，实现淡入

动画抖动剖析：

执行 display: block 时会单独触发重排

执行动画 opacity 时也会单独触发重排

也就是 ul 标签刚显示出来，又重新应用上了 opacity: 0 和 transform: scaleY(.8)，导致抖动的发生

解决方案：

既然是因为两次重排导致动画抖动，那合并起来触发一次重排就可以了，优化后的代码如下：

// >>>>> js部分 <<<<<

timer = requestAnimationFrame(function () {

listEl.show();

listEl.removeClass('out').addClass('in');

})

使用 requestAnimationFrame 的原因在于浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果

优化后的效果：

正常动画.gif

点击查看优化后的代码