使用 :hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個樣式切換到另一個樣式，而且切換是會有過渡效果。但有時我們想要使用 js 來驅動過渡（即在代碼中觸發過渡）也是可以實現的。 和普通過渡一樣，先創建兩個樣式規則，一個是元素的初始狀態，一個是過渡結束的狀態。然後用 js 在合適 ...
使用 :hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個樣式切換到另一個樣式，而且切換是會有過渡效果。但有時我們想要使用 js 來驅動過渡（即在代碼中觸發過渡）也是可以實現的。 和普通過渡一樣，先創建兩個樣式規則，一個是元素的初始狀態，一個是過渡結束的狀態。然後用 js 在合適的事機修改對應元素的樣式即可。
下麵以一個日夜景圖片切換的樣例演示： （1）日景和夜景是兩張圖片疊在一起的。夜景圖初始透明度是0，覆蓋在日景圖上方。 （2）點擊“看夜景”按鈕，夜景圖透明度逐漸從0過渡到1，看起來畫面慢慢變成夜景。 （3）點擊“看日景”按鈕，夜景圖透明度逐漸又從1過渡到0，看起來畫面恢覆成日景。
線上樣例如下：
<!doctype html> <html lang="en"> <head> <title>hangge.com</title> <style> img { position:absolute; transition: opacity 5s; -webkit-transition: opacity 5s; } .solid { opacity: 1; } .transparent { opacity: 0; } </style> <script> function toNight(){ var nightImage = document.getElementById("nightImage"); nightImage.className = "solid"; } function toDay(){ var nightImage = document.getElementById("nightImage"); nightImage.className = "transparent"; } </script> </head> <body> <button onclick="toNight()">看夜景</button> <button onclick="toDay()">看日景</button> <div> <img src="day.png" alt="日景"/> <img src="night.png" alt="夜景" id="nightImage" class="transparent"/> </div> </body> </html>
