当你知道一个元素的初始状态和最终状态，你想要这个元素从初始到最终，比如你想让一个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" id="div"></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>