編碼的世界 / 優質文選 / 生涯
Js點擊觸發Css3的動畫Animations、過渡Transitions效果
2022年3月16日
-
關鍵是首先指定動畫效果的CSS屬性名稱，然後在Js中改變這個屬性 如果不使用Js觸發，可以選擇利用css的狀態：hover，focus，active 來觸發，也可以一開始就觸發
下例為Js點擊觸發過渡Transitions效果，指定的屬性名稱是width
<!DOCTYPE html>
<html>
<head>
<style>#aaa {
width: 100px;
height: 100px;
background: blue;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
</style>
<script>
function big() {
document.getElementById("aaa").style.width = "300px";
}
function small() {
document.getElementById("aaa").style.width = "100px";}
</script>
</head>
<body>
<button onclick="big()">Big</button>
<button onclick="small()">Small</button>
<div id="aaa"></div>
</body>
</html>
原創文章，歡迎轉載，轉載請注明出處！
熱門文章
