问题记录：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
点击查看优化后的代码
