<transition name="fade"></transition>

<transition name="fold">
    <div class="shopcart-list" v-show="listShow">
     <div class="list-header">
      <h1 class="title">购物车</h1>
      <span class="empty" @click="empty">清空</span>
     </div>
     <div class="list-content" ref="list">
      <ul>
       <li class="food border-1px" v-for="(food,index) in selectFoods" v-show="food.count>0">
        <span class="name">{{selectName[index]}}</span>
        <div class="price">
         <span>￥{{food.price*food.count}}</span>
        </div>
        <div class="cartcontrol-wrapper">
         <v-cartcontrol :food="food"></v-cartcontrol>
        </div>
       </li>
      </ul>
     </div>
    </div>
   </transition>

 .fold-enter-active,.fold-leave-active
   transition:all 0.5s
  .fold-enter,.fold-leave
   transform :translate3d(0,0,0)
  .shopcart-list
   position:absolute
   transform:translate3d(0,-100%,0)//动画结束后的效果需要在此处进行设置，设置在.fold-enter-active中，元素动画结束后该样式属性会被移除掉，将会看不到想要的效果
   top: 100%//元素即使显示也不再视图窗口中，通过transform实现显示
   z-index:-1
   width:100%

<div id="example-2">
 <button @click="show = !show">Toggle show</button>
 <transition name="bounce">
  <p v-if="show">Look at me!</p>
 </transition>
</div>

new Vue({
 el: '#example-2',
 data: {
  show: true
 }
})

.bounce-enter-active {
 animation: bounce-in 0.5s linear;
}
.bounce-leave-active {
 animation: bounce-out 0.5s linear;
}
@keyframes bounce-in {
 0% {
  transform: scale(0);
 }
 50% {
  transform: scale(1.5);
 }
 100% {
  transform: scale(1);
 }
}
@keyframes bounce-out {
 0% {
  transform: scale(1);
 }
 50% {
  transform: scale(1.5);
 }
 100% {
  transform: scale(0);
 }
}

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="external nofollow" rel="stylesheet" type="text/css">

<div id="example-3">

 <button @click="show = !show">

  Toggle render

 </button>

 <transition

  name="custom-classes-transition"

  enter-active-class="animated tada"

  leave-active-class="animated bounceOutRight"

 >

  <p v-if="show">hello</p>

 </transition>

</div> 

new Vue({
 el: '#example-3',
 data: {
  show: true
 }
})

<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) {
  // ...
 },
 // 此回调函数是可选项的设置
 // 与 CSS 结合时使用
 enter: function (el, done) {
  // ...
  done()
 },
 afterEnter: function (el) {
  // ...
 },
 enterCancelled: function (el) {
  // ...
 },
 // --------
 // 离开时
 // --------
 beforeLeave: function (el) {
  // ...
 },
 // 此回调函数是可选项的设置
 // 与 CSS 结合时使用
 leave: function (el, done) {
  // ...
  done()
 },
 afterLeave: function (el) {
  // ...
 },
 // leaveCancelled 只用于 v-show 中
 leaveCancelled: function (el) {
  // ...
 }
}