vue2实现过渡动画，transition的简单使用

水平有限，遇到的坑记录一下
transition结构如下：

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

css样式如下

<style lang="stylus" rel="stylesheet/stylus">
  .cartcontrol
    font-size:0
    text-align:center
    .cart-decrease
      display:inline-block
      padding:6px
      .inner
        display:inline-block
        line-height:24px
        text-align:center
        font-size:24px
        color: rgb(0,160,220)
      &.move-enter,&.move-leave-to
        transform:translate3d(24px,0,0)
        .inner
          transform: rotate(180deg)
      &.move-enter-active,&.move-leave-active
        opacity:1
        transition:all .5s linear
        .inner
          transition:all .5s linear
</style>

坑：
1，move-enter,move-leave-to:动画的开始状态和结束状态
2，move-enter-active,move-leave-active：动画的过程
3，inner:display必须设置为inline-block，否则没有高度不旋转