码迷,mamicode.com
首页 > Web开发 > 详细

CSS的过渡

时间:2019-12-23 22:13:23      阅读:232      评论:0      收藏:0      [点我收藏+]

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

当你知道一个元素的初始状态和最终状态,你想要这个元素从初始到最终,比如你想让一个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的过渡

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!