使用JavaScript觸發(fā)過渡效果的方法
更新時間：2017年01月19日 09:37:45 作者：HDWK
hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個樣式切換到另一個樣式，而且切換是會有過渡效果。但有時我們想要使用 js 來驅(qū)動過渡（即在代碼中觸發(fā)過渡）也是可以實現(xiàn)的，下面通過本文給大家介紹下
使用 :hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個樣式切換到另一個樣式，而且切換是會有過渡效果。但有時我們想要使用 js 來驅(qū)動過渡（即在代碼中觸發(fā)過渡）也是可以實現(xiàn)的。
和普通過渡一樣，先創(chuàng)建兩個樣式規(guī)則，一個是元素的初始狀態(tài)，一個是過渡結(jié)束的狀態(tài)。然后用 js 在合適的事機修改對應(yīng)元素的樣式即可。
下面以一個日夜景圖片切換的樣例演示：
（1）日景和夜景是兩張圖片疊在一起的。夜景圖初始透明度是0，覆蓋在日景圖上方。
（2）點擊“看夜景”按鈕，夜景圖透明度逐漸從0過渡到1，看起來畫面慢慢變成夜景。
（3）點擊“看日景”按鈕，夜景圖透明度逐漸又從1過渡到0，看起來畫面恢復(fù)成日景。
在線樣例如下：
<!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觸發(fā)過渡效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
作用域是當(dāng)前的執(zhí)行上下文，值和表達式在其中“可見”或可被訪問，本文主要介紹了Javascript局部作用域和全局作用域，文中有詳細的代碼示例，具有一定的參考價值,需要的朋友可以借鑒一下2023-06-06
Javascript insertAfter() 實現(xiàn)函數(shù)代碼
DOM沒有提供insertAfter()方法，我們可以自己擴展下。2011-10-10
本文主要介紹了js實現(xiàn)登錄驗證碼的方法，代碼簡潔明了，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹通過js如何控制當(dāng)再次點擊按鈕是的間隔時間,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了JS圖片預(yù)加載插件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文為大家介紹下如何解決js中window.open彈出的是上次的緩存頁面的問題，下面有個不錯的示例，感興趣的額朋友可以參考下2013-12-12
《javascript設(shè)計模式》學(xué)習(xí)筆記七：Javascript面向?qū)ο蟪绦蛟O(shè)計組合模式詳解
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計組合模式,結(jié)合實例形式分析了《javascript設(shè)計模式》中Javascript面向?qū)ο蠼M合模式相關(guān)概念、原理、定義、用法及操作注意事項,需要的朋友可以參考下2020-04-04
JS?getRandomValues和Math.random方法深入解析
這篇文章主要為大家介紹了JS?getRandomValues和Math.random方法深入詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
我看到過很多人不愿意去正視ajax所存在的技術(shù)瓶頸，其實AJAX更應(yīng)該是Ajax而不是AJAX，突出第一個A是想強調(diào)其實AJAX發(fā)揚的是一種異步傳輸?shù)姆椒?，而不是具體到底使用了哪種技術(shù)2013-11-11
這篇文章主要介紹了bootstrap-table后端分頁功能,結(jié)合完整實例形式分析了bootstrap-table后端請求、數(shù)據(jù)分頁功能具體步驟與實現(xiàn)技巧,需要的朋友可以參考下2020-06-06