CSS的过渡

当你知道一个元素的初始状态和最终状态，你想要这个元素从初始到最终，比如你想让一个div从红色变成蓝色，但又不想那么生硬的直接变过去，这时候就可以使用过渡了。

transition: property duration timing-function delay;

property 指定要过渡的CSS属性
duration 指定过渡的时间
timing-function 速度曲线，比如匀速，先慢后快
delay 延迟开始执行过渡效果的时间

如下代码，将鼠标移上去，div元素会变宽，有一个动画的效果，在开始之前设定div的宽度，再:hover上又重新定义了该元素的宽度，于是开始和最终的状态都有了，中间的动画效果，由浏览器自己去处理。

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
        	.container{
        		 200px;
        		height: 200px;
        		background: skyblue;
        		transition: width 2s; /*后面两个参数不写，浏览器会使用默认的值*/
        	}
        	.container:hover{
        		 400px;
        	}
        	
        </style>
    </head>
    <body>
		<div class="container"></div>


    </body>
</html>

transition-timing-function

以上面代码为例，来看看这些时间曲线有什么不同

linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

以上这列可以在浏览器自带的调试器的CSS属性面板那调试，直到满意为止

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
        	.container{
        		 200px;
        		height: 200px;
        		background: skyblue;
        		transition: width 2s; /*后面两个参数不写，浏览器会使用默认的值*/
        		transition-timing-function: cubic-bezier(0.95, -0.18, 0, 0.46);
        		
        	}
        	.container:hover{
        		 400px;

        	}
        	
        </style>
    </head>
    <body>
		<div class="container"></div>


    </body>
</html>

transition-delay

延时执行的时间

.container{
     200px;
    height: 200px;
    background: skyblue;
    transition: width 2s cubic-bezier(0.95, -0.18, 0, 0.46) 1s;
}

设置多个过渡

关键代码

transition: width,height,background 2s,2s, 1s;

也可以写成下面的样子

transition-property: width,height,background;
transition-duration: 2s,2s, 1s;

完整代码

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
        	.container{
        		 200px;
        		height: 200px;
        		background: skyblue;
        		transition: width,height,background 2s,2s, 1s;
        	}
        	.container:hover{
        		 400px;
        		height: 400px;
        		background: pink;
        	}
        	
        </style>
    </head>
    <body>
		<div class="container"></div>


    </body>
</html>

点击按钮执行过渡

上面是通过鼠标移上去才过渡的，但如果是点击这种怎么搞，CSS没这玩意的伪类啊

通过js添加类来达到效果

第一步：把最终的状态类写上

.container-click{
     400px;
    height: 400px;
    background: pink;
}

第二步：写js代码，记得给div加个id，如下

let num = 0;
let div = document.getElementById('div');

div.onclick = function(){

    if(num === 0){
        div.classList.add("container-click");
        num = 1;
    }else{
        div.classList.remove("container-click");
        num = 0;
    }

}

完整代码

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
        	.container{
        		 200px;
        		height: 200px;
        		background: skyblue;
        		transition-property: width,height,background;
        		transition-duration: 2s,2s, 1s;
        	}
        	.container-click{
        		 400px;
        		height: 400px;
        		background: pink;
        	}
        	
        </style>
    </head>
    <body>
		<div class="container" ></div>

		<script type="text/javascript">
			let num = 0;
			let div = document.getElementById('div');
			
			div.onclick = function(){
				
				if(num === 0){
					div.classList.add("container-click");
					num = 1;
				}else{
					div.classList.remove("container-click");
					num = 0;
				}
				
			}
		</script>
    </body>
</html>

transition-timing-function

transition-delay

设置多个过渡

点击按钮执行过渡

相关推荐