vue2.0 transition 多个元素嵌套使用过渡

Posted 2020-11-01 lingling144

在做vue的demo的时候遇到一个问题，多个嵌套的元素如何设置transition？ 
我的代码：代码中元素整体做平移，里面的inner中做旋转，实现一个圆形滚动的效果

<transition name="move">
  <div class="cart-decrease" @click="decreaseCart" v-show="food.count>0">
    <span class="inner icon-remove_circle_outline"></span>
  </div>
</transition>


样式：

.cart-decrease{
  display:inline-block;
  padding:6px;
  opacity:1;
  transform:translate3D(0,0,0);
  &.move-enter-active{
    opacity:1;
    transform:translate3D(0,0,0);
    transition:all 0.4s linear;
  }
  &.move-enter{
    opacity:0;
    transform:translate3D(24px,0,0);
    .inner{
      transform: rotate(180deg)
    }
  }
  &.move-leave{
    opacity:1;
    transform:translate3D(0,0,0);
  }
  &.move-leave-active {
    opacity:0;
    transform:translate3D(24px,0,0);
    transition:all 0.4s linear;
    .inner{
      transform: rotate(180deg)
    }

  }
  .inner{
    display:inline-block;
    font-size:24px;
    color:rgb(0,160,220);
    line-height:24px;
    transition:all 0.4s linear;
  }
}