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 技术 使元素流畅地到达动画终点。

 

html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        link(rel="stylesheet", href="../framework/animate.css",type="text/css")
        script(src="../framework/vue/vue.js")
        title animate过度 
    body
     div#example
      input(type="text",v-model="show")
          //- 添加进入名字enter-active-class 出去的名字leave-active-class 启动名字animated（可以在子里面）
      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")
       .look(v-if="show",v-for="(item,index) in goodsLists" :key="index") {{item.orderStatus}}
        .goods(v-for="items in item.list") {{items.goodsId}}


    script.
        new Vue({
            el: '#example',
            data() {
                return {
                    show:"",
                    goodsList: [{
                        'nextTime': '2017年7月24日12:08:58',
                        'orderStatus': 3, //0 未付款 1 已付款 2 已取消 3 已完成
                        'totalPrices': 0,
                        list: [{
                            'src': 'framework/lg.jpg',
                            'goodsId': '0031665',
                            'commodityImg': 'images/111.jpg',
                            'title': '第一个商品的第一个',
                            'price': '20', //金额
                            'values': 2, //数量
                        }, {
                            'src': 'framework/lg.jpg',
                            'goodsId': '0031665',
                            'commodityImg': 'images/111.jpg',
                            'title': '第一个商品的第児个',
                            'price': '20.10', //金额
                            'values': 4, //数量
                        }]
                    }, {
                        'nextTime': '2017年7月24日12:08:58',
                        'orderStatus': 1, //0 未付款 1 已付款 2 已取消 3 已完成
                        'totalPrices': 1000,
                        list: [{
                            'src': 'framework/lg.jpg',
                            'goodsId': '0031665',
                            'commodityImg': 'images/111.jpg',
                            'title': '第二个商品的第一个',
                            'price': '220', //金额
                            'values': 1, //数量

                        }, {
                            'src': 'framework/lg.jpg',
                            'goodsId': '0031665',
                            'commodityImg': 'images/111.jpg',
                            'title': '第二个商品的第二个',
                            'price': '20.30', //金额
                            'values': 4, //数量
                        }, ]
                    }, {
                        'nextTime': '2017年7月24日13:08:58',
                        'orderStatus': 2, //0 未付款 1 已付款 2 已取消 3 已完成
                        'totalPrices': 10100,
                        list: [{
                            'src': 'framework/lg.jpg',
                            'goodsId': '0031665',
                            'commodityImg': 'images/111.jpg',
                            'title': '第三个商品的第一个',
                            'price': '220', //金额
                            'values': 1, //数量
                        }, ]
                    }],
                }
            },

            computed:{
                goodsLists(){//找到相同的才显示
                    var arr=[];
                    this.goodsList.forEach(function(val){
                        console.info(val.orderStatus==2)
                        if(val.orderStatus==this.show){
                            arr.push(val);
                        }
                    }.bind(this));
                    return arr;
                }
            },
            methods:{
                //进入中
                beforeEnter(el){
                     console.info('进入动画执行之前')
                },
                enter(el,done){
                     console.info('进入动画执行')
                     console.info(done)
                },
                afterEnter(el){
                     console.info('进入动画执行之后')
                },
                enterCancelled(el){
                     console.info('???')
                },
                //离开
                beforeLeave(el){
                     console.info('离开执行之前')
                },
                leave(el){
                     console.info('离开执行')
                }, 
                afterLeave(el){
                     console.info('离开执行之后')
                }, 
                leaveCancelled(el){
                     console.info('？？？')
                },
            }
        })