前端 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;
    }
}

视频讲解

整合营销服务商