vue2.0动画效果transiton使用

编辑于２０１７．１２．１６－加油！
transition使用应放在需要移动的div外面<transition></transition>，而不再是放在<div transition="move">.
使用方法：--例子是购物车的减号按钮的渐变移出的效果（平移）
<transition name="move">　　先起个名move,下面的样式就是&.move-leave,move-enter,样式的类名会自动添加到元素上    <div class="cart-decrease" v-show="food.count > 0" @click.stop="desNum()" >    <span class="inner">    <i class="fa fa-minus-square "></i>    </span>    </div> </transition>
move-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
move-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
move-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
move-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除
　
.cart-decrease, .cart-adddisplay:inline-block　　　　要为inline-blockvertical-align: centerline-height: 24pxfont-size:24pxfloat: lefttransition: all 0.5s linear　　　　　设置外层div的变化：所有元素，０．５秒，线性变化&.move-transition　　　　　　　　　　　初始状态opacity: 1transform: translate3D(0, 0, 0).innerdisplay: inline-block
　　　　　　　　　　　　　　　　　　　transform: rotate(0)   内层的可以设置旋转&.move-enter, &.move-leave　　　　动画移入和移出时候的样式opacity: 0transform: translate3D(24px, 0, 0)
　　　　　　　　　　　　　　 .inner
    transform: rotate(180deg)　　内层的可以设置旋转
以下参考内容来自：https://segmentfault.com/q/1010000007738500
自定义过渡类名
上面的四个过渡类名都是根据transition的name属性自动生成的，那么能否自己定义这四个类名呢？答案是可以的，通过enter-class、enter-active-class、leave-class、leave-active-class这四个特性来定义。
<div>  <button @click="show=!show">show</button>  <transition     name="fade"    enter-class="fade-in-enter"    enter-active-class="fade-in-active"    leave-class="fade-out-enter"    leave-active-class="fade-out-active"  >    <p v-show="show">hello</p>  </transition></div>
&.fade-in-active, &.fade-out-active  transition: all 0.5s ease     &.fade-in-enter, &.fade-out-active  opacity: 0 
JavaScript钩子函数
除了用CSS过渡的动画来实现vue的组件过渡，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子：
<transition  v-on:before-enter="beforeEnter"  v-on:enter="enter"  v-on:after-enter="afterEnter"  v-on:enter-cancelled="enterCancelled"  v-on:before-leave="beforeLeave"  v-on:leave="leave"  v-on:after-leave="afterLeave"  v-on:leave-cancelled="leaveCancelled"></transition>
methods: {  // 过渡进入  // 设置过渡进入之前的组件状态  beforeEnter: function (el) {    // ...  },  // 设置过渡进入完成时的组件状态  enter: function (el, done) {    // ...    done()  },  // 设置过渡进入完成之后的组件状态  afterEnter: function (el) {    // ...  },  enterCancelled: function (el) {    // ...  },  // 过渡离开  // 设置过渡离开之前的组件状态  beforeLeave: function (el) {    // ...  },  // 设置过渡离开完成时地组件状态  leave: function (el, done) {    // ...    done()  },  // 设置过渡离开完成之后的组件状态  afterLeave: function (el) {    // ...  },  // leaveCancelled 只用于 v-show 中  leaveCancelled: function (el) {    // ...  }}
上面的钩子函数中可以进行任何你想做的DOM操作。 
小技巧：如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果，这时你就可以用钩子函数，只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。