CSS的过渡

标签：bezier   round   定义   UNC   速度   line   代码   back   你知道   

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

transition: property duration timing-function delay;

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

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

transition-timing-function

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

• linear 规定以相同速度开始至结束的过渡效果

• ease 规定慢速开始，然后变快，然后慢速结束的过渡效果

• ease-in 规定以慢速开始的过渡效果
• ease-out 规定以慢速结束的过渡效果
• ease-in-out 规定以慢速开始和结束的过渡效果

• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

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

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;

完整代码

点击按钮执行过渡

上面是通过鼠标移上去才过渡的，但如果是点击这种怎么搞，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;
    }

}

完整代码

CSS的过渡

标签：bezier   round   定义   UNC   速度   line   代码   back   你知道   

原文地址：https://www.cnblogs.com/tourey-fatty/p/12088643.html