transition

最新推荐文章于 2024-04-15 16:31:02 发布

墨·漓

最新推荐文章于 2024-04-15 16:31:02 发布

阅读量150

点赞数 1

原文链接：https://blog.csdn.net/weixin_57750091/article/details/117453857

版权

transition

Transition概念
transition-property
transition-duration
transition-delay
transition-timing-function
过渡的坑
总结

Transition概念

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

transition-property 过渡效果的 CSS 属性的名称（height、width、opacity等）。
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>