2. 程式人生 > 其它 >js動畫事件

js動畫事件

阿新 • • 發佈：2021-02-08

技術標籤：javascriptjscss3javascript

js之動畫事件

首先，動畫事件主要包括以下三個animationstart，animationiteration和animationend事件，下面做簡單分別介紹。

animationstart該事件在css動畫開始播放時觸發
animationiteration該事件在css動畫重新播放時觸發
animationend該事件在css動畫結束播放時觸發

我們知道animation主要有6個屬性，分別來設定動畫呈現出來哦的效果，這個在我的另一篇文章中有介紹，我這邊簡單展示一下。

animation:name duration timing-function delay iteration-count direction;

分別是：動畫名稱 動畫持續事件 動畫執行速度曲線 動畫開始時的執行時間 動畫播放次數 規定是否反向輪流播放。
下面一段程式碼講述的是採用監聽動畫開始，動畫再次播放和動畫結束做出相應的改變，這裡用到addEventListener監聽動畫開始、動畫持續播放、動畫結束播放。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>animation動畫篇</title>
		<style type="text/css"
 
>
			#con
			{
				width: 100px;
				height: 100px;
				background: #FFA500;
				position: relative;
			}
			@-moz-keyframes myanimation
			{
				from{left: 100px;top:0px;}
				to{left: 200px;top: 100px;}
			}
			@-webkit-keyframes myanimation
			{
				from{left: 100px;top: 0px;}
				to{left: 200px;top: 100px;}
			}
 

		</style>
		
	</head>
	<body>
		<div id="con" onclick="myfunction()">
			
		</div>
		<script type="text/javascript">
			 var x = document.getElementById('con');    //設定全域性變數x
			 function myfunction()
			 {
				 x.style.WebkitAnimation="myanimation 2s linear 3";   // Chrome, Safari 和 Opera  瀏覽器相容問題
				 x.style.animation="myanimation 2s linear 3";
			 }
			 x.addEventListener("animationstart",myanimationStart);
			 x.addEventListener("animationiteration",myanimationiterration);
			 x.addEventListener("animationend",myanimationend);
			 x.addEventListener("webkitAnimationStart",myanimationStart);    // Chrome, Safari 和 Opera  瀏覽器相容問題
			 x.addEventListener("webkitAnimationIteration",myanimationiterration);    // Chrome, Safari 和 Opera  瀏覽器相容問題
			 x.addEventListener("webkitAnimationEnd",myanimationend);    // Chrome, Safari 和 Opera  瀏覽器相容問題
			 function myanimationStart()      //動畫開始執行時觸發，通過addEventListener事件監聽到執行函式myanimationStart
			 {
				 this.innerHTML="動畫正在執行";
				 x.style.background="pink";         
			 }
			 function myanimationiterration()      //動畫再次執行觸發，同樣也是通過事件監聽
			 {
				 this.innerHTML="動畫重新執行";
				 x.style.background="greenyellow";
			 }
			 function myanimationend()      //動畫執行結束時觸發，同樣也是通過事件監聽事件
			 {   this.innerHTML="動畫執行結束";
				 x.style.background="blue";
				 x.style.width=200+"px";
				 x.style.height=200+"px";
				 window.alert("動畫執行結束");
			 }
		</script>
	</body>
</html>

效果展示：
在這裡插入圖片描述

相關推薦

js動畫事件

技術標籤：javascriptjscss3javascript js之動畫事件 首先，動畫事件主要包括以下三個animationstart，animationiteration和animationend事件，下面做簡單分別介紹。

js滾輪事件 自定義滾動條的實現

本文例項為大家分享了js自定義滾動條的實現的具體程式碼，供大家參考，具體內容如下

js鍵盤事件實現人物的行走

本文例項為大家分享了js鍵盤事件實現人物行走的具體程式碼，供大家參考，具體內容如下

JS動畫三劍客——setTimeout、setInterval、requestAnimationFrame

一、前言 　　前端實現動畫效果主要有以下幾種方法：CSS3中的transition 和 animation ，Javascript 中可以通過定時器 setTimeout、setinterval，HTML5 canvas，HTML5提供的requestAnimationFrame。本文主要分析setT

js的事件委派

事件委派就是把子元素的事件繫結在父元素身上，通過判斷事件目標的不同，做不同的事 e.target;

js的事件冒泡、捕獲、目標和事件的相容

在js中，事件的寫法有三種，這也是件事的相容。 1.addEventListener var div=document.querySelector("div");

js：事件（註冊、解綁、DOM事件流、事件物件、事件委託）

1、註冊事件 （1）傳統方式註冊事件 <body> <button id=\"b1\">請點選</button>

js：事件（鍵盤、滑鼠事件）

1、滑鼠事件 （1）常用的滑鼠事件 滑鼠經過事件 <body id=\"body\"> <button id=\"b\">按鈕</button>

JS的事件冒泡和事件捕獲

DOM事件流三個階段 1.事件捕獲：當滑鼠觸發DOM事件時，瀏覽器會從根節點由外到內進行事件傳播。即觸發子元素的事件，父元素會通過事件捕獲的方式優先觸發父元素的事件。

JS-DOM事件

JS DOM設定元素屬性 設定id為box的這個元素的文字顏色,屬性是減號連線的複合形式時

Vue.js 動畫（三）

1. Vue 中的動畫 Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。

js基礎 ---- 事件迴圈機制

一、為什麼要事件迴圈機制 　　我們都知道 JavaScript 是一門單執行緒非阻塞的指令碼語言，這就意味著再任何時候 JavaScript 都只會有一個主執行緒來處理所有的任務

為什麼要用css動畫替換js動畫?

導致JavaScript效率低的兩大原因：操作DOM和使用頁面動畫。 通常我們會通過頻繁的操作 DOM的css來實現視覺上的動畫效果，導致js效率低的兩個因素都包括在內了在頻繁的操作DOM和css時，瀏覽器會不停的執行重排和重繪，

JS的事件迴圈

宿主（如瀏覽器）發起的任務稱為巨集觀任務 JavaScript 引擎發起的任務稱為微觀任務

vue 動畫元件封裝 【js 動畫】

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Title</title>

SVG.js動畫系列3-沿路徑動畫

本文轉載https://blog.csdn.net/wangchangjiang1984/article/details/109518151 一個小圓球沿路徑動畫的例子。效果圖：

JS瀏覽器事件迴圈機制

來源：https://www.cnblogs.com/yqx0605xi/p/9267827.html 程序、執行緒 程序是系統分配的獨立資源，是 CPU 資源分配的基本單位，程序是由一個或者多個執行緒組成的。

js 滑鼠事件模擬

在1秒以後模擬滑鼠click按鈕： <html lang=\"en\" class=\"no-js\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">

Vue.js動畫

元件的過渡 條件的渲染（使用v-if） 條件的展示（使用v-show） 動態元件 元件根節點

簡述Js的事件迴圈

普通訊息佇列 一個程式碼塊中的所有同步程式碼，都會被看作一個巨集任務，新增到普通訊息佇列的尾部