过渡

什么是过渡

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

1
2
3
4
5
6
7
8
/* 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 属性:用于定义过渡效果开始的延迟时间。

触发过渡的方式

成功设置过渡的条件

  1. 具有一个CSS属性在过渡效果中的开始样式和最终样式

  2. 通过transition-property指定过渡效果要执行的样式属性名称

  3. 通过transition-duration 设置过渡效果执行的时长

  1. 伪类触发过渡

    • 使用子属性

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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      <!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秒匀速过渡.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <!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>
  2. JavaScript触发过渡

    推荐使用css

检测过渡是否完成

须使用JavaScript使用.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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