transition属性

Posted 郭郭郭牧鑫

tags:

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

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>

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

Vue中的transition组件

在vue中我们可以直接用transition包裹所需要进行动画的标签

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
     item.text 
  </li>
</transition-group>

然后在css中设置如下的内容即可：
name- 字符串，用于自动生成过渡 CSS 类名。例如，name: 'fade’会自动扩大到.fade-enter，.fade-enter-active等默认为"v"。
appear- 布尔值，是否在初始渲染时应用过渡。默认为false.
css- boolean, 是否应用 CSS 过渡类。默认为true. 如果设置为false，则只会触发通过组件事件注册的 JavaScript 钩子。
type- 字符串，指定要等待以确定转换结束时间的转换事件的类型。可用值为"transition"和"animation"。默认情况下，它会自动检测持续时间较长的类型。
mode- 字符串，控制离开/进入转换的时序。可用模式是"out-in"和"in-out"; 默认为同时。
duration- 号码 | enter:number, leave:number , 指定过渡的持续时间。默认情况下，Vue 等待根过渡元素上的第一个transitionend或animationend事件。
enter-class - 细绳
leave-class - 细绳
appear-class - 细绳
enter-to-class - 细绳
leave-to-class - 细绳
appear-to-class - 细绳
enter-active-class - 细绳
leave-active-class - 细绳
appear-active-class - 细绳

总结

<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属性的主要内容，如果未能解决你的问题，请参考以下文章

css3属性

Transition

过渡属性

transition

transition是啥意思

transition属性是啥意思