transiton 正反动画

image.png

1. 目标：点击icon，中间的横线收缩，然后，上面2个线条和下面2个线条旋转，组成一个一个叉； 再点击图标，上面2个线条和下面2个线条旋转恢复成平行线状态，中间收缩的线条重新延展开，恢复初始宽度。

// dom
<div class="tag-list-box" id="tagListIconBox">
        标签
        <div class="list-icon-box">
          <div class="bit-1"></div>
          <div class="bit-2"></div>
          <div class="bit-3"></div>
        </div>
      </div>

// script
<script>
      var $boxDom = document.getElementById('tagListIconBox')
      $boxDom.addEventListener("click", function(){
        var classList = $boxDom.classList
        if ( classList && [...classList].includes('open')) {
          classList.remove('open')
        } else {
          classList.add('open')
        }
      }, false)
    </script>

// style
.tag-list-box {
        position: relative; right: 0; top: 0; background: #f5f5f5; color: #ea6f5a;;
        border: 1px solid #ea6f5a;; border-radius: 3px; padding:0 10px; cursor: pointer;
        box-sizing: border-box; height: 42px; line-height: 42px; width: 80px;
      }

      #tagListIconBox {
        font-size: 13px; font-weight: bold;
      }
      .list-icon-box {
        position: absolute; width: 22px;height: 22px; right: 10px; top: 50%; margin-top: -11px;
      }
      .bit-1, .bit-2, .bit-3 {
        height: 4px; width: 100%; position: absolute; left: 0;
      }
      .bit-1 {
        top: 0;
      }
      .bit-3 {
        bottom: 0;
      }
      .bit-2 {
        top: 50%; margin-top: -2px; left: 50%; transform: translateX(-50%);
        /* 这段动画 和 open 状态的动画 执行先后是相反的 */
        transition:transform 0.5s, width 0.8s 0.8s;
      }
      .bit-1::before, .bit-1::after, .bit-3::before, .bit-3::after, .bit-2 {
        background: #ea6f5a;
      }
      .bit-1::before, .bit-1::after, .bit-3::before, .bit-3::after {
        content: ''; display: block;width: 50%; height: 100%; position: absolute;top:0;
        /* 这段动画 和 open 状态的动画 执行先后是相反的 */
        transition: transform 0.5s;
      }
      .bit-1::before, .bit-3::before{
        left: 0; transform-origin: 0 50%;
      }
      .bit-1::after, .bit-3::after {
        left: 50%; transform-origin: 100% 0;
      }
      .open .bit-2 {
        width: 4px; transform: translateX(-50%) rotate(45deg);
      }
      .open .bit-1::before {
        transform: rotate(45deg);
        top: 0px;
        left: 2px;
      }
      .open .bit-1::after {
        transform: rotate(-45deg) translate3d(-3px, -2px, 0);;
      }
      .open .bit-3::before {
        transform: rotate(-45deg);
        left: 2px;
      }
      .open .bit-3::after {
        transform: rotate(45deg) translate3d(-1px, 1px, 0);
      }
      .open .bit-2 {
        /* 这段动画 和 非open 状态的动画 执行先后是相反的 */
        transition:transform 0.5s 0.8s, width 0.8s;
      }
      .open .bit-1::before,.open .bit-1::after,.open .bit-3::before,.open .bit-3::after {
        /* 这段动画 和 非open 状态的动画 执行先后是相反的 */
        transition: transform 0.5s 1s;
      }