transition属性

Posted 郭郭郭牧鑫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了transition属性相关的知识,希望对你有一定的参考价值。

Transition概念

Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性。

transition-property 用于指定应用过渡属性的名称
transition-duration 用于指定这个过渡的持续时间
transition-delay 用于指定延迟过渡的时间
transition-timing-function 用于指定过渡的类型

transition-property

指定应用过度属性的名称,默认值为all,表示所有可被动画的属性都表现出过度动画
property:指定多个;
none:没有过度动画;
all:所有可被动画的属性都表现出过度动画;
IDENT:属性名称(可以指定多个)
注意:当只设置了 transition-property 属性而没有设置过渡持续时间的时候,过渡效果不会生效。

transition-duration

用于设置过渡的持续时间,属性值以秒s或毫秒ms为单位,默认值为0。
可以指定多个时长,多个每个时长会被应用到由 transition-property 指定的对应属性上。
例如:想让容器的宽度有一个10秒的过渡,高度有一个5秒的过渡,代码如下:

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        transition-property: width, height;
        transition-duration: 10s, 5s;  /*设置与 transition-property 对应的过渡时间*/
    }

    .box:hover { /*在鼠标移入的时候修改宽高*/
        width: 400px;
        height: 400px;
    }
</style>
</head>

<body>
    <div class="box"></div>
</body>

transition-delay

规定了在过渡效果开始作用之前需要等待的时间(延迟时间),值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在什么时候开始。取值为正时会延迟响应过渡效果;取值为负时会使过渡立即开始。
可以指定多个延迟时间,每个延迟将会分别作用于你所指定的相符合的css属性transition-property。

transition-timing-function

css属性受到transition的影响,会产生不断变化的中间值,而css transition-timing-function属性用来描述 这个中间是怎样计算的。实质上,通过这个函数会建立一条加速度曲线,因此在整个transition变化过程中,变化速度可以不断改变。

  • linear 匀速
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速,效果比 ease 感觉强烈一些
  • cubic-bezier 贝塞尔曲线

过渡的坑

transition在元素首次渲染还没有结束的情况下是不会被触发的

示例代码:
  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
        }
        
        body {
            width: 60%;
            height: 60%;
            border: 1px solid;
            margin: 100px auto 0;
        }
        
        #test {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: pink;
            text-align: center;
            font: 50px/200px "微软雅黑";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition-property: width;
            transition-duration: 2s;
            transition-timing-function: linear;
        }
    </style>
    <body>
    <div id="test">

    </div>
    </body>
    <script type="text/javascript">
    alert(1);

    //transition在元素首次渲染还没有结束的情况下是不会被触发的
    /*  var test = document.querySelector("#test");
     test.style.width = "300px"; */

    /*   window.onload = function() {
          var test = document.querySelector("#test");
          test.style.width = "300px";
      } */
    setTimeout(function() {
        var test = document.querySelector("#test");
        test.style.width = "300px";
    }, 3000);
</script>

*指定的过度的属性的名称要一致
*简写属性顺序不能错

总结

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        /* transition 简写属性 */
        transition: 1s width, 2s height;
    }

    .box:hover {
        width: 400px;
        height: 400px;
    }
</style>

<body>
    <div class="box"></div>
</body>

特别注意:
在transition中,值是有书写顺序的:第一个为时间的值会被赋值给transition-duration,第二个为时间的值会被赋值给transition-delay
推荐抒写顺序
过渡时间-过渡样式-过渡形式-延迟时间

以上是关于transition属性的主要内容,如果未能解决你的问题,请参考以下文章

使用js和css-transition属性57行代码实现简易无缝轮播图

transition属性是啥意思

CSS过渡属性transitions详细解读——Web前端系列学习笔记

CSS过渡属性transitions详细解读——Web前端系列学习笔记

transition中的坑

transition啥意思