當網頁某部分發生改變時，新增一些動畫有利於讓使用者知道發生了什麼事情。因為動畫能預告新內容的到達，或者讓使用者知道資訊被移除。在這篇文章裡，將會看到如何運用動畫幫助新內容的引進，例如顯示或隱藏列表裡的專案。
引進內容
動畫有個很好的用處，它能夠讓訪客知道你的網站內容在何時發生了改動。當新增或刪除內容而沒有任何動畫進行過渡時，內容的突然改變會讓使用者感到困惑。而通過新增細微的動畫就能避免這種情況發生，並且有助於“宣佈”有東西將要離開或引進頁面。
以下是一個通過新增或刪除操作來管理列表內容的例子。大多數動畫能用於其它型別的內容。如果你發現它們是有用的，或有其它想法想新增進來，那麼請 聯絡我們，我們很樂意聽聽你的想法。
編寫HTML程式碼
在一開始，準備好一個已提前填充好的列表和一個可以為該列表新增新專案的按鈕。
|
1 2 3 4 5 |
<ul id="list"> <li class="show">List item</li> <li class="show">List item</li> </ul> <button id="add-to-list">Add a list item</button> |
但有一些地方需要注意。首先，在HTML程式碼裡有兩個 ID。一般來說，我們不會用 ID 來設定樣式，因為它們的唯一性會引入一些問題。然而，它們會在使用 JavaScript 時提供了便利性。
初始列表專案有類名 “show”，正因為這是類名，我們將會在後面通過它為元素新增動畫效果。
一些 JavaScript 程式碼
為了實現演示裡的動畫，將會編寫一些 JavaScript 程式碼來新增新列表專案，然後為新新增列表專案新增類名 “show”，以至動畫能夠發生。使用這兩個步驟的理由是，如果列表專案直接以可見的狀態新增進來，它們就沒有任何過渡時間而直接發生了。
我們打算在 li 元素上使用動畫效果，但這將會讓通過覆蓋樣式來新增其它刪除元素的動畫效果，變得更加困難。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* * Add items to a list - from cssanimation.rocks/list-items/ */ document.getElementById('add-to-list').onclick = function() { var list = document.getElementById('list'); var newLI = document.createElement('li'); newLI.innerHTML = 'A new item'; list.appendChild(newLI); setTimeout(function() { newLI.className = newLI.className + " show"; }, 10); } |
無動畫
在最基本的效果中，我們能寫一些 CSS 程式碼顯示列表專案。因為新增類名 show 讓它們可見，所以刪掉類名 show 也能導致它們消失。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
li { list-style: none; background: #d1703c; color: #fff; height: 0; line-height: 2em; margin: 0; padding: 0 0.5em; overflow: hidden; width: 10em; } li.show { height: 2em; margin: 2px 0; } |
這些樣式將 li 設定為一個沒有專案符合、height 為 0、margin 為 0和 overflow 為 hidden 的矩形。這樣做是為了直到新增類名 show，它們才會出現而變得可見。
類名 show 應用了 height 和 margin。因為我們至今還沒使用動畫，所以列表專案會直接出現在頁面，像下面那樣。當然你也可以點選列表專案，讓它們消失。
淡入淡出
作為第一個動畫，我們將會新增一個簡單的淡入淡出效果。相對之前的專案列表，該列表專案多了漸變效果。雖然在視覺上看起來仍然有一點笨重，但這有利於讓瀏覽者有更長的時間去注意有東西正在變化。
因為要在已建立 CSS 片段上新增效果。所以為了在列表上應用這個效果，需要在包圍 li 的容器上新增類名 fade。
|
1 2 3 4 5 6 7 8 |
.fade li { transition: all 0.4s ease-out; opacity: 0; height: 2em; } .fade li.show { opacity: 1; } |
滑下&淡入淡出
每次新增或刪除一個專案列表都會很突然，這導致了不和諧的效果。那就讓我們通過調整高度來建立一個更加流暢的滑動效果。
這裡與上面類名 fade 唯一不同的是 height:2em 被移除掉了。因為類名 show 已包含了一個高度(繼承自第一個CSS片段)，這樣高度就會自動過渡了。
|
1 2 3 4 5 6 7 |
.slide-fade li { transition: all 0.4s ease-out; opacity: 0; } .slide-fade li.show { opacity: 1; } |
旋轉進來
除了淡入淡出和滑動效果，還能更進一步地新增一些 3D 效果。瀏覽器不止能在 X 或 Y 軸上變換元素，還具有深度的場景( Z 軸)。
為了設定這個效果，需要定義一個 section 容器作為 3D 過渡的舞臺。通過給 perspective 賦值就可以做到。
CSS 的 perspective 代表場景的深度。一個較低的數值意味著近視角，是一個極端的角度。所以這值得你通過設定不同的值來找到一個合適的值。
|
1 2 3 |
.swing { perspective: 100px; } |
下一步是設定 li 元素在這個舞臺裡的變形。我們將會使用 opacity 建立淡入淡出效果作為前奏，然後為在舞臺上的 li 新增 transform 進行旋轉。
|
1 2 3 4 5 6 7 8 9 10 11 |
.swing li { opacity: 0; transform: rotateX(-90deg); transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); } .swing li.show { opacity: 1; transform: none; transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); } |
在這個例子中，讓 li 繞X 軸向後旋轉 90 度作為初始狀態。當新增類名 show 時，它的 transform 被設定為 none，這就能讓它在舞臺上進行過渡了。為了給它旋轉效果，我使用了 cubic-bezier 時間函式。
側面旋轉
現在我們只要稍稍調整這個效果，就能十分容易地建立不同的設計。下面這個例子，是讓專案列表在側面旋轉。
要建立這個效果，我們只需改變旋轉軸。
|
1 2 3 4 5 |
.swing li { opacity: 0; transform: rotateY(-90deg); transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); } |
我們已經把 rotateX 改成 rotateY 了。
瀏覽器核心字首和瀏覽器測試
為了可讀性，上面那些程式碼都沒有包含任何字首。在這裡，我強烈推薦新增字首，以支援那些需要 -webkit 或其他字首的瀏覽器。而我使用了 Autoprefixer 來解決這個問題。
正因為這些動畫都是在基本的 show/hide 上構建的，所以它們在不支援這些動畫的瀏覽器上優雅地回退。在各種各樣的裝置和瀏覽器上進行測試是重要的，但大多數現代瀏覽器都能支援這些動畫。
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
任選一種支付方式
