1. 問題#
css 中使用動畫屬性會和同標籤下的 fixed 屬性衝突，導致定位失效，那麼該如何解決呢？
2. 分析#
簡單說一下問題產生的背景，昨天夜裡我想給我的博客頁面做一個簡單的動畫，瀏覽器刷新的時候從下往上漸現的效果，代碼如下：
/* index-container類名是頁面的主體部分 */
.index-container {
opacity: 0;
animation-name: index;
animation-duration: 0.7s;
animation-fill-mode: forwards;
}
/* 一個簡單的動畫實現 */
@keyframes index {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
運行之後發現，動畫可以很好的顯示，但是當我翻閱文章詳情的時候發現，目錄固定失效了。
按照原來的設置是當頁面往下滑動的時候，目錄會緊貼瀏覽器的頂部，方便跳轉和查看目錄，但是現在它已經不能緊貼了。看一下瀏覽器設置，屬性確實生效了，但是頁面並沒有顯示我們想要的結果。
之前我寫目錄固定事件的時候用的是 scroll 事件，然後昨天寫動畫，綁定的 onload 事件，我初步判斷是兩個 window 衝突了，導致第二個失效，所以我就改了一種寫法，用 addEventListener 事件監聽執行他們，但最終無論怎麼寫，目錄固定始終不能生效。
昨天熬得太晚了，就沒管它放在那了，今天一早我就去張鑫旭的網站查了一下，果然有這麼一個問題。
參考文章：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
但是文章只是介紹了問題產生的原因，並沒有明確給出一個好的解決辦法。
3. 方法#
雖然沒有明確的方法，但是給了我一個思路，因為動畫中的一些屬性，比如 scale、translate 等，會造車容器的寬高重新計算，而 fixed 屬性則依賴於規定的一個像素值，所以當執行動畫的時候，頁面的高度發生了變化，所以 fixed 不能安心的執行自己的任務了。
原因找到了，方法自然而然就出來了，看圖（圖很醜，手畫的，能理解意思就行）
這是我最開始的布局，我將動畫綁定給 紅色框 的容器了，而目錄就在紅色框內，所以失效。
現在我重新布局一下，
目錄依舊處於側邊，但是我將他和通常的側邊欄分開成兩個容器了，現在我把動畫綁定給 主體部分 和 側邊欄 ，這樣目錄就和綁定動畫的標籤分開了。
再到頁面測試，發現沒有任何問題，動畫效果和目錄固定互不影響。
很快樂，又可以愉快地折騰了！