transition

最新推荐文章于 2025-03-25 19:43:39 发布

阳光之末亚

最新推荐文章于 2025-03-25 19:43:39 发布

阅读量3.2k

点赞数 5

文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_40947563/article/details/92771687

版权

transition的属性及值

transition-property:指定应用过度属性的名称默认值为all 表示所有可被动画的属性都表现出过度动画可指定多个property； none：没有过度动画；all：所有可被动画的属性都表现出过度动画； IDENT：属性名称（可以指定多个）

transition-duration:属性以秒或毫秒为单位指定过度动画所需的时间。默认值为0s，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁剪。两种情况下，属性列表都保持不变。属性值：以秒或者毫秒为单位不接受负值，必须带单位。

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

默认值：ease

你可以规定多个timing function,通过使用transition-property属性，可以根据主列表（transition-property的列表）给每个css属性应用相应的timing function ；如果timing fucntion 的个数比主列表中数量少，缺少的值被设置为初始值（ease）。如果timing function 比主列表要多，timign functioin函数列表会被截断至合适的大小。这两种情况下声明的css属性都是有效的。

属性值：

1.ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线（0.25,0.1,0.25,1.0）。

2.linear:（匀速），linear函数等同于贝塞尔曲线（0.0,0.0,1。0,1.0）

3.ease-in：（加速），ease-in 函数等同于贝塞尔曲线（0.42,0,1.0,1.0）

4.ease-out：（减速），ease-out函数等同于贝塞尔曲线（0,0,0.58,1.0）

5.ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线（0.42,0,0.58,1.0）

6.cubic-bezier:贝塞尔曲线

7.step-start:等同于stteps(1,start)

step-end:等同于steps(1,end)

step(,[,[start|end]]?)

第一个参数：必须为正整数，指定函数的步数

第二个参数:指定每一步的值发生变化的时间点（默认值end）*/

代码示例：
 <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, height;
            transition-duration: 2s;
            transition-timing-function: linear;
        }
    </style>
    
    <body>
    <div id="test">

    </div>
</body>

<script type="text/javascript">
    window.onload = function() {
        var testNode = document.querySelector("#test");
        var bodyNode = document.querySelector("body");
        bodyNode.onmouseover = function() {
                testNode.style.width = "300px";
                testNode.style.height = "300px";
                setTimeout(function() {
                    testNode.style.display = "none";
                }, 3000)
            }
        testNode.addEventListener("transitionend", function() {
            alert("over");
        })
    }
</script>

过度的那些坑：

（1）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>

（2）指定的过度的属性的名称要一致

示例代码：
 <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;
        }
        
        body:hover #test {
            transition-property: height;
            width: 200px;
            height: 200px;
        }
    </style>
    <body>
    <div id="test">

    </div>
</body>

(3)简写属性顺序不能错

 <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>

</body>
<script type="text/javascript">
    window.onload = function() {
            var test = document.createElement("div");
            test.id = "test";
            document.documentElement.appendChild(test);
            test.style.width = "300px";
        }
        /* 
          简写属性：transition
          用于：transition-property,transition-duration,transition-trming-function,和transition-delay.
          CSS过渡由简写属性transition定义是最好的方式，可以避免属性值列表长度不一，节省调试时间
          默认值：
            transition-delay:0s;
             transition-duration:0s
              transition-property:all
               transition-timing-function:ease
          注：在 transition属性中，各个值的书写顺序是很重要的；第一个可以解析为时间的值会被赋值给 transition-duration,第三个可以解析为
          时间的值会被赋值给 transition-delay
          推荐书写顺序：过渡时间  过渡样式  过渡形式  延迟时间【，过渡时间 过渡样式 过渡形式，延迟时间】
          兼容性： transition可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于webkit的浏览器仍然需要厂商前缀。
          如果相兼容旧版本的浏览器那么也需要厂商前缀（例如Firefox 15及之前版本，Opera 12及之前版本）
         */
</script>