問題記錄：IE11中執(zhí)行淡入動畫時出現(xiàn)抖動效果，效果如下：

抖動.gif

解決此問題需理解一些概念：

1. 重排：重新生成布局
2. 重繪：重新繪制
   注意：重排必定導(dǎo)致重繪，重繪不一定需要重排；比如改變背景色，就只會觸發(fā)重繪

原始代碼：

// >>>>> 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);
  }
}

執(zhí)行步驟：

1. 點(diǎn)擊按鈕，控制 ul 標(biāo)簽 display 屬性讓其顯示
2. 給ul標(biāo)簽追加 in 類名，讓其 opacity 從0到1，實現(xiàn)淡入

動畫抖動剖析：

1. 執(zhí)行 display: block 時會單獨(dú)觸發(fā)重排
2. 執(zhí)行動畫 opacity 時也會單獨(dú)觸發(fā)重排
   也就是 ul 標(biāo)簽剛顯示出來，又重新應(yīng)用上了 opacity: 0 和 transform: scaleY(.8)，導(dǎo)致抖動的發(fā)生

解決方案：

既然是因為兩次重排導(dǎo)致動畫抖動，那合并起來觸發(fā)一次重排就可以了，優(yōu)化后的代碼如下：

// >>>>> js部分 <<<<<
timer = requestAnimationFrame(function () {
  listEl.show();
  listEl.removeClass('out').addClass('in');
})

使用 requestAnimationFrame 的原因在于瀏覽器可以優(yōu)化并行的動畫動作，更合理的重新排列動作序列，并把能夠合并的動作放在一個渲染周期內(nèi)完成，從而呈現(xiàn)出更流暢的動畫效果

優(yōu)化后的效果：

正常動畫.gif