CSS3(十二) CSS3 过渡

CSS3

发布日期: 2020-05-07

更新日期: 2020-05-24

文章字数: 557

阅读时长: 2 分

阅读次数:

CSS3 过渡效果:transition

transition 语法
- transtion : 运动时间延迟时间运动的属性 ,运动轨迹
- trnasition : 2s 1s width ease
  - 运动时间:可以是 S 也可以是毫秒 ms
  - 延迟时间：可以是 S 也可以是毫秒 ms
  - 属性 : 表示变化的属性
  - 运动形式:
    - ease:默认(逐渐变慢)
    - linear:(匀速)
    - ease-in : (加速)
    - ease-out:(减速)
    - ease-in-out :(先加速后减速)
    - cubic-bezier:(贝塞尔曲线)
过渡完成事件 transitionend:
- webkit 内核
  - obj.addEventListener(‘webkitTransitionEnd’,function(){},false);
firefox:
- obj.addEventListener(‘transitionend’,function(){},false);

transition 变换基点

-webkit-transform-origin: 50% 50% 0 ;(默认)
第一个参数表示 X 轴第二个参数表示 Y 轴第三个参数表示 Z 轴
此方法不能与 translate 同时使用。 ###transition 的基本操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>transition</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: red;
      }
      /* .box {transition: 1s;} */
      /*.box {transition: 500ms width;}*/
      /*.box {transition: 1s all;}*/
      /*.box {transition: 3s width ease;}*/
      /*.box {transition: 3s width ease-in-out;}*/
      /*.box {transition: 3s width cubic-bezier(0.930, 0.415, 0.000, 1.610);}*/
      /* .box {transition: 1s width, 2s height, 3s background;} */ /*多样式过渡*/
      /*.box {transition: 1s width, 2s 1s height, 3s 3s background;}*/ /*延迟过渡*/
      .box:hover {
        background: blue;
        width: 500px;
        height: 300px;
      }
    </style>
    <script></script>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

过渡事件遇到的问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>transition</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: red;
        transition: 1s width;
      }
    </style>
    <script></script>
  </head>
  <body>
    <div class="box" id="box"></div>
    <script>
      var oBox = document.getElementById('box')

      oBox.onclick = function () {
        this.style.width = this.offsetWidth + 100 + 'px'
      }

      //transitonend之后，又改变属性，接着又触发了transition就形成了循环
      addEnd(oBox, function () {
        this.style.width = this.offsetWidth + 100 + 'px'
      })

      function addEnd(obj, fn) {
        obj.addEventListener('webkitTransitionEnd', fn, false)
        obj.addEventListener('transitionend', fn, false)
      }
    </script>
  </body>
</html>

过渡事件的解决办法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>transition</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: red;
        transition: 1s width;
      }
    </style>
    <script></script>
  </head>
  <body>
    <div class="box" id="box"></div>
    <script>
      var oBox = document.getElementById('box')

      oBox.onclick = function () {
        this.style.width = this.offsetWidth + 100 + 'px'
        addEnd(oBox, end)
      }

      function end() {
        this.style.width = this.offsetWidth + 100 + 'px'
        removeEnd(this, end)
      }

      function addEnd(obj, fn) {
        obj.addEventListener('webkitTransitionEnd', fn, false)
        obj.addEventListener('transitionend', fn, false)
      }

      function removeEnd(obj, fn) {
        obj.removeEventListener('webkitTransitionEnd', fn, false)
        obj.removeEventListener('transitionend', fn, false)
      }
    </script>
  </body>
</html>