用純JS實現動畫效果代碼量大,計算復雜.因此現在前端頁面的動畫效果一般都采用CSS來實現.
CSS動畫實現簡單高效,但是在處理動畫,控制動畫過程上卻缺少一些有效手段.
例如我們想在動畫效果完成時調用回調函數來處理一些事務,會發現CSS並沒有提供直接的方法來讓我們使用.
一.css動畫簡介
css動畫效果有兩種,即過渡和動畫.
1.過渡
當元素從一種樣式轉變為另一種樣式,我們為這種轉變添加動畫效果,這種效果就稱作過渡.
CSS的過渡是通過 transtion 屬性實現的.
transtion屬性必須包含以下兩個值:
- 要添加過渡效果的樣式屬性名
- 過渡效果持續時間
另外還有兩個可選的屬性值:
- 過渡效果的速度時間曲線函數
- 過渡效果的延遲時間
下面是一個CSS過渡效果的例子:
div{ width: 100px; transition: width 2s; -webkit-transtion:width 2s; } div.hover{ width: 300px; }
當鼠標移動到此div上時,此div寬度會增加200px.
我們為寬度添加上 2s 過渡效果.最后效果如下:
2.動畫
在實現比較復雜的動畫時,單純使用過渡已經無法達到目的,可以選擇使用CSS的animation屬性來定義動畫效果.
要想使用animation屬性,我們必須先了解一下CSS3加入的@keyframes規則.
@keyframes規則用於創建動畫,可以從動畫運動狀態的幀來定義動畫.
如下即@kayframes定義動畫的例子:
@keyframes show { from {color: red;} to {color: yellow;} } @-webkit-keyframes show /* Safari 與 Chrome */ { from {color: red;} to {color: yellow;} }
通過@keyframes我們可以定義動畫從開始到結束的樣式變化 .
我們也可以通過定義動畫效果的百分比狀態來定義動畫樣式,如下
@keyframes show { 0% {color: red;} 25% {color: yellow;} 50% {color: blue;} 100% {color: green;} } @-webkit-keyframes show /* Safari 與 Chrome */ { 0% {color: red;} 25% {color: yellow;} 50% {color: blue;} 100% {color: green;} }
在使用@keyframes定義了動畫效果之后,我們可以通過 animation 來將動畫效果綁定到元素,如下:
div:hover{ animation:show 5s; }
具體效果如下:
動畫文字
鼠標移動其上即可看到動畫效果
以上就是CSS動畫的簡單介紹,另外CSS3還添加了transform屬性,用於2D和3D轉換,也被經常用來作為動畫使用.
二.CSS動畫的回調函數
像以上的CSS動畫,如果想使用回調函數來控制動畫完成后的事務處理,是比較麻煩的.
一.延時函數
很多人使用JS的延時函數 setTimtout() 來解決CSS動畫的回調問題,類似如下的代碼:
setTimtout(function(){ dosomething() //動畫的回調函數 }, delaytime); //動畫的持續時間
但是這種方法由於並不是真正意義的回調,會造成以下幾個問題:
- 由於動畫和延時函數並不一定是同一時間開始,導致函數和動畫不同步
- 會造成JS代碼和CSS代碼相互關聯耦合,修改和維護比較麻煩
- 存在多個動畫需要回調時會造成代碼混亂和臃腫
- 在多個動畫效果同時結束時會引起回調函數沖突
因此,不建議使用延時函數作為動畫的回調函數.
二.JS事件
其實,JS提供了兩個事件,可以完美的解決動畫的回調函數問題,那就是 transtionend 和 animationend,當動畫完成時,即會觸發對應的事件.
我們可以通過這兩個事件輕松優雅的為動畫添加回調函數.
具體用法如下:
transtionend
document.getElementById("myDIV").addEventListener("transitionend", myFunction); //myFunction即為動畫回調函數
animationend
document.getElementById("myDIV").addEventListener("animationend", myFunction); //myFunction即為回調函數
我們通過以下這個例子來體驗這兩個事件的具體使用:
<style> div#test { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div#test:hover { width:300px; } </style> </head> <body> <div id="test"> </div> <script> document.getElementById("test").addEventListener("transitionend", myFunction); function myFunction() { this.innerHTML = "回調函數觸發div變為粉色"; this.style.backgroundColor = "pink"; } </script>
效果如下:
當然也可以使用Jquery庫的動畫回調函數,很簡單,代碼類似如下,
$("#item").animate({height:"200px"}, function() {
alert("hello");
});
以上就是關於CSS動畫回調函數的一些知識,希望對你有幫助.