JavaScript判斷animation動畫執行完畢
分享一段程式碼例項,它實現了判斷animation執行完畢的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } .rect { position: relative; width: 100px; height: 100px; background-color: #f80; text-align:center; line-height:100px; margin:0px auto; } @keyframes move { from { transform: rotate(0); } to { transform: rotate(360deg); } } </style> <script> window.onload = function () { var _rect = document.querySelector(".rect"); _rect.onclick = function () { _rect.style.animation = "move 3s"; } _rect.addEventListener("webkitAnimationEnd", function () { this.innerHTML="螞蟻部落" }, false); } </script> </head> <body> <div class="rect"></div> </body> </html>
上面的程式碼實現了我們的要求,animationEnd事件可以實現判斷功能。
相關閱讀:
(1).@keyframes參閱CSS3 @keyframes一章節。
(2).transform: rotate()參閱transform: rotate()一章節。
(3).document.querySelector()參閱document.querySelector()一章節。
(4).animation參閱CSS3 animation一章節。
(5).addEventListener()參閱addEventListener()一章節。
(6).animationEnd參閱animationEnd事件一章節。
相關文章
- JavaScript 判斷transition動畫執行完畢JavaScript動畫
- JavaScript判斷iframe是否載入完畢JavaScript
- javascript判斷flash檔案載入完畢程式碼例項JavaScript
- javascript判斷iframe頁面載入完畢方法簡單介紹JavaScript
- jQuery判斷css檔案載入完畢再去執行程式碼jQueryCSS行程
- 如何判斷js檔案是否載入完畢JS
- js如何判斷<img>圖片是否載入完畢JS
- js如何判斷img圖片是否載入完畢JS
- jquery如何判斷js檔案是否載入完畢jQueryJS
- 如何判斷一個img圖片是否載入完畢
- js判斷引入的js檔案是否載入完畢JS
- js檢測css3動畫是否執行完畢程式碼例項JSCSSS3動畫
- iOS Swift UIButton中ImageView的animationImages動畫執行完畢後,圖示變暗iOSSwiftUIView動畫
- django搭建完畢執行顯示hello djangoDjango
- 優雅地等待子協程執行完畢
- 命令執行的判斷依據: ; , &&, ||
- javascript如何讓頁面載入完畢再去執行程式碼JavaScript行程
- jQuery ajax載入完畢再去執行後面的程式碼jQuery
- [Linux]bc|判斷命令成功執行Linux
- 判斷當前程式是否正在執行
- CSS animation 動畫CSS動畫
- SVG animation 動畫SVG動畫
- JavaScript 判斷閏年JavaScript
- Javascript判斷空物件JavaScript物件
- JavaScript判斷閏年JavaScript
- Android判斷服務是否在執行Android
- 而井教你判斷當前Javascript執行環境是否支援async函式JavaScript函式
- 如何在低版本IE瀏覽器中實現判斷img圖片載入完畢瀏覽器
- Android Animation 執行原理Android
- 頁面載入完畢之後自動執行指定程式碼
- Javascript 判斷物件是否相等JavaScript物件
- Flutter動畫之AnimationFlutter動畫
- JavaScript如何中斷迴圈執行?JavaScript
- hiberante執行時候出現,sql執行完畢,但帶有警告是什麼意思?SQL
- 判斷應用所執行的CPU型別型別
- 判斷ssh遠端命令是否執行結束
- 判斷某過程是否在執行的方法
- javascript檢測iframe是否已經載入完畢JavaScript