于是开始和最终的状态都有了
当你知道一个元素的初始状态和最终状态，你想要这个元素从初始到最终，好比你想让一个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{ width: 200px; height: 200px; background: skyblue; transition: width 2s; /*后面两个参数不写，浏览器会使用默认的值*/ } .container:hover{ width: 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{ width: 200px; height: 200px; background: skyblue; transition: width 2s; /*后面两个参数不写，浏览器会使用默认的值*/ transition-timing-function: cubic-bezier(0.95, -0.18, 0, 0.46); } .container:hover{ width: 400px; } </style> </head> <body> <div class="container"></div> </body> </html> transition-delay延时执行的时间
.container{ width: 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{ width: 200px; height: 200px; background: skyblue; transition: width,height,background 2s,2s, 1s; } .container:hover{ width: 400px; height: 400px; background: pink; } </style> </head> <body> <div class="container"></div> </body> </html> 点击按钮执行过渡上面是通过鼠标移上去才过渡的，但如果是点击这种怎么搞，CSS没这玩意的伪类啊
通过js添加类来到达效果
第一步：把最终的状态类写上
.container-click{ width: 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{ width: 200px; height: 200px; background: skyblue; transition-property: width,height,background; transition-duration: 2s,2s, 1s; } .container-click{ width: 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>CSS的过渡
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/33229.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")