CSS class name first transition under the tree,
1, v-enter-active: assembly process can be understood as the entire display.
2, v-enter: the initial state is displayed by the component
3, v-enter-to: is the state assembly last show
4, v-leave-active: a hidden component of the whole process
5, v-leave: the initial state is the hidden component.
6, v-leave-to: final state after the assembly is hidden.
In general the effect of 2 and 6 show the same. Because we used before <transition name = "xxx"> </ transition> package assembly, it is necessary to use xxx-enter-active, xxx-leave-active like the css.
<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)