vue+animate过度动画

transition-group

Props：
- tag - string, 默认为 span
- move-class - 覆盖移动过渡期间应用的 CSS 类。
- 除了 mode，其他特性和 <transition> 相同。
事件：
- 事件和 <transition> 相同.
用法：

<transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag 属性配置哪个元素应该被渲染。

注意，每个 <transition-group> 的子节点必须有独立的key ，动画才能正常工作

<transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类（通过 name 属性或配置 move-class属性自动生成）。如果 CSS transform 属性是“可过渡”属性，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。

  1 html(lang="en")
  2     head
  3         meta(charset="UTF-8")
  4         meta(name="viewport", content="width=device-width, initial-scale=1.0")
  5         meta(http-equiv="X-UA-Compatible", content="ie=edge")
  6         link(rel="stylesheet", href="../framework/animate.css",type="text/css")
  7         script(src="../framework/vue/vue.js")
  8         title animate过度 
  9     body
 10      div#example
 11       input(type="text",v-model="show")
 12           //- 添加进入名字enter-active-class 出去的名字leave-active-class 启动名字animated（可以在子里面）
 13       transition-group(enter-active-class="animated tada",leave-active-class="animated bounceOutRight",@before-enter="beforeEnter",@enter="enter",@after-enter="afterEnter",@enter-cancelled="enterCancelled",@before-leave="beforeLeave",@leave="leave",@after-leave="afterLeave",@leave-cancelled="leaveCancelled")
 14        .look(v-if="show",v-for="(item,index) in goodsLists" :key="index") {{item.orderStatus}}
 15         .goods(v-for="items in item.list") {{items.goodsId}}
 16 
 17 
 18     script.
 19         new Vue({
 20             el: '#example',
 21             data() {
 22                 return {
 23                     show:"",
 24                     goodsList: [{
 25                         'nextTime': '2017年7月24日12:08:58',
 26                         'orderStatus': 3, //0 未付款 1 已付款 2 已取消 3 已完成
 27                         'totalPrices': 0,
 28                         list: [{
 29                             'src': 'framework/lg.jpg',
 30                             'goodsId': '0031665',
 31                             'commodityImg': 'images/111.jpg',
 32                             'title': '第一个商品的第一个',
 33                             'price': '20', //金额
 34                             'values': 2, //数量
 35                         }, {
 36                             'src': 'framework/lg.jpg',
 37                             'goodsId': '0031665',
 38                             'commodityImg': 'images/111.jpg',
 39                             'title': '第一个商品的第児个',
 40                             'price': '20.10', //金额
 41                             'values': 4, //数量
 42                         }]
 43                     }, {
 44                         'nextTime': '2017年7月24日12:08:58',
 45                         'orderStatus': 1, //0 未付款 1 已付款 2 已取消 3 已完成
 46                         'totalPrices': 1000,
 47                         list: [{
 48                             'src': 'framework/lg.jpg',
 49                             'goodsId': '0031665',
 50                             'commodityImg': 'images/111.jpg',
 51                             'title': '第二个商品的第一个',
 52                             'price': '220', //金额
 53                             'values': 1, //数量
 54 
 55                         }, {
 56                             'src': 'framework/lg.jpg',
 57                             'goodsId': '0031665',
 58                             'commodityImg': 'images/111.jpg',
 59                             'title': '第二个商品的第二个',
 60                             'price': '20.30', //金额
 61                             'values': 4, //数量
 62                         }, ]
 63                     }, {
 64                         'nextTime': '2017年7月24日13:08:58',
 65                         'orderStatus': 2, //0 未付款 1 已付款 2 已取消 3 已完成
 66                         'totalPrices': 10100,
 67                         list: [{
 68                             'src': 'framework/lg.jpg',
 69                             'goodsId': '0031665',
 70                             'commodityImg': 'images/111.jpg',
 71                             'title': '第三个商品的第一个',
 72                             'price': '220', //金额
 73                             'values': 1, //数量
 74                         }, ]
 75                     }],
 76                 }
 77             },
 78 
 79             computed:{
 80                 goodsLists(){//找到相同的才显示
 81                     var arr=[];
 82                     this.goodsList.forEach(function(val){
 83                         console.info(val.orderStatus==2)
 84                         if(val.orderStatus==this.show){
 85                             arr.push(val);
 86                         }
 87                     }.bind(this));
 88                     return arr;
 89                 }
 90             },
 91             methods:{
 92                 //进入中
 93                 beforeEnter(el){
 94                      console.info('进入动画执行之前')
 95                 },
 96                 enter(el,done){
 97                      console.info('进入动画执行')
 98                      console.info(done)
 99                 },
100                 afterEnter(el){
101                      console.info('进入动画执行之后')
102                 },
103                 enterCancelled(el){
104                      console.info('???')
105                 },
106                 //离开
107                 beforeLeave(el){
108                      console.info('离开执行之前')
109                 },
110                 leave(el){
111                      console.info('离开执行')
112                 }, 
113                 afterLeave(el){
114                      console.info('离开执行之后')
115                 }, 
116                 leaveCancelled(el){
117                      console.info('？？？')
118                 },
119             }
120         })