前端 CSS3動畫

雖說IE9以及更早版本的IE瀏覽器都不支持css3動畫，但是IE6-8瀏覽器已是江河日下，使用谷歌瀏覽器、火狐瀏覽器、IE10+瀏覽器以及移動端瀏覽器等這些支持css3動畫的瀏覽器的人數越來越多，所以如果很簡單的就能讓一部分人獲得更好的用戶體驗，那何樂而不為呢。

從廣義上來講，css3動畫可以分為兩種。

過渡動畫

第一種叫過渡（transition）動畫，就是從初始狀態過渡到結束狀態這個過程中所產生的動畫。所謂的狀態就是指大小、位置、顏色、變形（transform）等等這些屬性。css過渡只能定義首和尾兩個狀態，所以是最簡單的一種動畫。

要想使一個元素產生過渡動畫，首先要在這個元素上用transition屬性定義動畫的各種參數。可定義的參數有

transition-property：規定對哪個屬性進行過渡

transition-duration：定義過渡的時間，默認是0

transition-timing-function：定義過渡動畫的緩動效果，如淡入、淡出等，默認是 ease

transition-delay：規定過渡效果的延遲時間，即在過了這個時間后才開始動畫，默認是0

為了書寫方便，也可以把這四個屬性按照以上順序簡寫在一個 transition 屬性上：

如果是使屬性的默認值，則可以省略：

相當于：

如果想要同時過渡多個屬性，可以用逗號隔開，如：

使用transtion屬性只是規定了要如何去過渡，要想讓動畫發生，還得要有元素狀態的改變。如何改變元素狀態呢，當然就是在css中給這個元素定義一個類（:hover等偽類也可以），這個類描述的是過渡動畫結束時元素的狀態。

這樣，當我們把鼠標移動到div上的時候，div的狀態發生了變化，就能看到寬度從100到400，高度從100到400，背景顏色從黑到紅的，過渡時間為3秒的過渡效果了。

除了使用hover等系統提供的偽類外，我們也可以隨意的定義自己的類，然后想要過渡時就通過js把類加到元素上面：

見鼠標事件

對鼠標進行操作就會產生鼠標事件，比如按下、松開鼠標左鍵、右鍵或滾輪等。

onmousemove事件：當鼠標指針在指定元素上移動時，就會觸發該事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>

    <script>
        let box=document.getElementById("box");

        box.onmousemove=function(){
            box.style.backgroundColor="red";
        }
    </script>
</body>
</html>

當鼠標移動到div方形區域內，背景顏色變為紅色。

onmousedown事件：當鼠標指針移動到指定元素上并按下，會觸發該事件。

let box=document.getElementById("box");

box.onmousedown=function(){
    box.style.backgroundColor="red";
}

onmouseup事件：當鼠標指針移動到指定元素上按下并離開，會觸發該事件。

let box=document.getElementById("box");

box.onmousedown=function(){
    box.style.backgroundColor="red";
}

box.onmouseup=function(){
    box.style.backgroundColor="green";
}

createElement()方法

createElement()：通過指定名稱創建一個元素。

項目目標：

在輸入框輸入非空內容，自動添加到下方列表。

let list=document.getElementById("list");
let word=document.getElementById("word");

let arr=["吃飯", "睡覺", "打豆豆"];
for (let i=0; i < arr.length; i++) {
	let temp=document.createElement("li");
	temp.innerHTML=arr[i];
	list.append(temp);
}
word.onblur=function() {
	let value=word.value;
	conssole.log(value);
	if(value){
		let temp=document.createElement("li");
		temp.innerHTML=value;
		list.append(temp);
	}
	else
		alert("請輸入內容");
}

event對象

在事件被觸發時，js會自動生成一個event對象，控制臺輸出event可以查看這個事件的具體信息。

項目目標：瀏覽器中有一個紅色小球，鼠標點擊，小球就會移動到點擊的位置。

let box=document.getElementById("box");
document.onclick=function(event) {
	let x=event.clientX;
	let y=event.clientY;
	box.style.left=x + "px";
	box.style.top=y + "px";
}

拖拽效果

移動時disX和disY沒有變化：

項目目標：拖動紙飛機移動。

let img=document.getElementById("img");
img.onmousedown=function (event) {
    let disX=event.clientX - this.offsetLeft;
    let disY=event.clientY - this.offsetTop;
    img.onmousemove=function (event) {
        let l=event.clientX - disX;
        let t=event.clientY - disY;

        this.style.left=l + 'px';
        this.style.top=t + 'px';
    }
    img.onmouseup=function () {
        img.onmouseup=img.onmousemove=null;
    }
}

視頻講解

整合營銷服務商