標籤：變化 解決 包含 建立 常用 實現 eth 移動 webkit
用純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事件其實,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>
由於我沒有部落格的JS許可權,所以無法在這裡加上示範效果,大家可以自己複製到檔案中開啟,就可以看到動畫的回呼函數效果了.
以上就是關於CSS動畫回呼函數的一些知識,希望對你有協助.
CSS動畫效果的回調
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
