先树下下过渡的CSS类名,
1、v-enter-active:可以理解为组件显示的整个过程。
2、v-enter:是组件显示的起始状态
3、v-enter-to:是组件最后展示的状态
4、v-leave-active:是组件隐藏的整个过程
5、v-leave:是组件隐藏的起始状态。
6、v-leave-to:是组件隐藏后的最终状态。
一般来说2和6展示的效果一致。因为我们之前使用<transition name="xxx"></transition>包裹组件,所以在css中需要使用xxx-enter-active,xxx-leave-active等。
<div class="cartcontrol">
<transition name="move">
<div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
<span class="inner icon-remove_circle_outline"></span>
</div>
</transition>
<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
<div class="cart-add icon-add_circle" @click="addCart"></div>
</div>
.cartcontrol
font-size: 0
.cart-decrease
display: inline-block
padding: 6px
transition: all 0.4s linear
//&.move-transition
opacity: 1
transform: translate3D(0,0,0)
.inner
display: inline-block
line-height: 24px
font-size: 24px
color: rgb(0, 160, 220)
transition: all 0.4s linear
transform: rotate(0)
&.move-enter, &.move-leave-to
opacity: 0
transform: translate3D(24px,0,0)
.inner
transform: rotate(180deg)
.cart-count
display: inline-block
vertical-align: top
width: 12px
padding-top: 6px
line-height: 24px
text-align: center
font-size: 10px
color: rgb(147,153,159)
.cart-add
display: inline-block
padding: 6px
line-height: 24px
font-size: 24px
color: rgb(0,160,220)