前端课程——过渡

过渡

什么是过渡

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

/* 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 设置过渡效果执行的时长
  4. 伪类触发过渡
    • 使用子属性 各属性之间(多个属性时)用逗号分隔例如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>
  5. 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>