摘要：靜態(tài)頁兼容指南下的網(wǎng)頁字符亂碼問題原因這個可能是網(wǎng)頁沒有設(shè)置編碼造成。圖標(biāo)會瞬間顯示出來，但是卻沒有動畫或者過渡效果。問題解析暫時理解為的不支持的改變，直接操作會破壞動畫。如果在兩個屬性的操作中間插入操作，線程在處理的時候?qū)错樞驁?zhí)行。

這個可能是網(wǎng)頁沒有設(shè)置 meta charset 編碼造成。

添加如下代碼

將 disabled 寫在 input 上

如下代碼，點擊時報錯，顯示函數(shù)未定義

改成在 js 寫事件監(jiān)聽

$("#getCodeBtn").on("click", function() {
  getCode();
});

使用 font-awesome 的動畫時（loading 效果），倘若用 display 控制顯隱，則在 IE 下會表現(xiàn)異常。
圖標(biāo)會瞬間顯示出來，但是卻沒有動畫或者過渡效果。

暫時理解為 CSS3 的 animation、transition、transform 不支持 display 的改變，直接操作 display 會破壞動畫。

關(guān)于 display 為何會破壞 css 動畫，目前個人理解是，display 的操作會觸發(fā)瀏覽器的 reflow 操作，而 transition 支持的效果只是觸發(fā)瀏覽器的 repaint 操作，回到上面的 demo，如果我們通過 visibility 屬性來控制顯示與隱藏，則不會破壞 transition 的效果。所以，可以暫時這么認(rèn)為：reflow 與 repaint 的混合會破壞 transition 的動畫效果

讓 css 按順序處理

瀏覽器的 UI 線程在處理 UI 操作時，將多個 css 屬性的 set 操作加入在同一個 tick 中處理。如果在兩個 css 屬性的 set 操作中間插入 get 操作，UI 線程在處理的時候?qū)错樞驁?zhí)行。

container.css("display", "block");
container.css("display");
container.css("opacity", "1");

使用setTimeout來 hack 這個問題

本質(zhì)上也是改變了 set 操作的順序，只是 delay 的值在不同瀏覽器下需要選取的值也不同

container.css("display", "block");
setTimeout(function() {
  container.css("opacity", "1");
}, delay);

通過window.requestAnimationFrame來實現(xiàn)

container.css("display", "block");
requestanimationframe(function() {
  container.css("opacity", "1");
});

通過控制元素的顯示隱藏來避開 display 的操作

i.fa {
  // display: none;
  width: 0;
  opacity: 0;
}
&.loading {
  i.fa {
    // display: inline-block;
    margin-left: 10px;
    width: 1em;
    opacity: 1;
  }
}

隱藏也可以通過如以下樣式來完成

i {
  position: absolute;
  display: block;
  height: 0;
  padding: 0;
  margin: 0;
}