代码记录

//vue
//template
//过渡动画通过添加移除class名实现

  <div :class="[flag ? 'line_rotate' : '']"
       style="margin-top:0.625rem;"
       @click="tiggerClick">
    <span class="nav_line">
      <em></em>
    </span>
  </div>
  
//css
//为实现平滑效果，初始化图标手动绘制
.nav_line {
    display: block;
    width: 1.7rem;
    height: 0.2rem;
    background-color: @red;
    position: relative;
    transition: all 0.3s;
    backface-visibility: hidden;
    em {
        height: 2rem;
        width: 0.2rem;
        background-color: #fff;
        position: absolute;
        top: -0.625rem;
        left: 0.2rem;
        z-index: 444;
    }
    &:after,
    &:before {
        width: 100%;
        height: 0.2rem;
        background-color: @red;
        transition: all 0.3s;
        backface-visibility: hidden;
        content: '';
        position: absolute;
        left: 0;
    }
    &:before {
        top: -0.5rem;
    }
    &:after {
        top: 0.5rem;
    }
}


//旋转动画
.line_rotate {
    .nav_line {
        background-color: transparent;
        em {
            display: none;
        }
    }
    .nav_line:before {
        transform: rotate(45deg) translate(0.03rem, 0.03rem);
        background-color: @red;
        top: -0.05rem;
    }
    .nav_line:after {
        transform: rotate(-45deg) translate(0.04rem, -0.04rem);
        background-color: @red;
        width: 100%;
        top: 0.05rem;
    }
}