使用 :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>以上所述是小編給大家介紹的使用JavaScript觸發過渡效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
