过渡

什么是过渡

此属性同样存在浏览器兼容问题：

/* WebKit引擎的浏览器（Chrome、Safari、Opera） */
-webkit-transition : <single-transition>;
/* Gecko引擎的浏览器（Firefox） */
-moz-transition : <single-transition>;
/* Trident引擎的浏览器（IE 10+） */
-ms-transition : <single-transition>;
/* Presto引擎的浏览器（Opera） */
-o-transition : <single-transition>;

过渡子属性

ltransition-property 属性：用于定义过渡效果中的样式属性名称。
ltransition-duration 属性：用于定义过渡效果执行动画的时长。
ltransition-timing-function 属性：用于定义过渡效果计算的函数。
- ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢。
- linear：元素样式从初始状态过渡到终止状态时速度是匀速。
- ease-in：元素样式从初始状态过渡到终止状态时速度由慢到快。
- ease-out：元素样式从初始状态过渡到终止状态时速度由快到慢。
- ease-in-out：元素样式从初始状态过渡到终止状态时，先加速再减速。
- step：将整个过渡过程划分成相同大小的间隔，每个间隔是相等的。
ltransition-delay 属性：用于定义过渡效果开始的延迟时间。

触发过渡的方式

成功设置过渡的条件

具有一个CSS属性在过渡效果中的开始样式和最终样式
通过transition-property指定过渡效果要执行的样式属性名称
通过transition-duration 设置过渡效果执行的时长

伪类触发过渡

使用子属性

各属性之间（多个属性时）用逗号分隔例如transition-property: background-color,width;

每个属性与时间一一对应，如果指定的时长的个数小于属性的个数，则时长列表会被重复，以与属性的个数匹配；如果指定的时长的个数大于属性的个数，则时长列表会被裁减。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid gray;
            /* 设置执行过渡效果开始的样式 */
            background-color: lightcoral;
            /* 用来执行过渡效果的样式属性 */
            transition-property: background-color,width;
            /*  */
            transition-duration: 1s,2s;
        }
        /* 触发过渡效果的方式 */
        .box:hover{
            /* 设置执行过度效果最终的样式 */
            background-color: lightyellow;
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

使用合属性

用逗号分隔每个过渡。例如transition: width 2s linear,height 2s linear;表示2秒匀速过渡.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: lightcoral;
            transition: width 2s,height 2s;
        }
        .box:hover{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

JavaScript触发过渡
推荐使用css

检测过渡是否完成

须使用JavaScript使用.


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transitionEnd事件</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid gray;
      background: lightcoral;
      transition-property: background;
      transition-duration: 2s;
    }

    .box:hover {
      background: lightyellow;
    }
  </style>
</head>

<body>
  <div id="box" class="box"></div>
  <script>
    var box = document.getElementById('box');
    box.addEventListener('transitionend', function () {
      console.log('这个过渡执行完毕了......')
    })
  </script>
</body>

</html>