学习vue第十三节，列表组的动画效果

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    
    <style type="text/css">
        li{
            /* line-height: 40px; */
            border: 1px dashed #1B6D85;
            margin: 15px;
            cursor: pointer;
            padding: 12px;
            width: 100%;
        }
        
        
        .v-enter,
            .v-leave-to {
              opacity: 0;
              transform: translateY(80px);
            }
        
            .v-enter-active,
            .v-leave-active {
              transition: all 0.6s ease;
            }
        

          li:hover {
              background-color: hotpink;
              transition: all 0.8s ease;
            }
         /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
            .v-move {
              transition: all 0.6s ease;
            }
            .v-leave-active{
              position: absolute;
            }


    </style>
    </head>
    <body>
        
        <div id="app">
            <!-- 
            如果是要过渡的效果是多个，v-for 生成的不能用 不能使用 transition 包裹，需要使用 transitionGroup  
             --><!-- @click="add(item.id,item.name)" @click="add(item.id,item.name)"-->
             <transition-group>
                 <li v-for="(item,i) in list" :key="item.id"  @dblclick="del(i)">
                    {{item.id}} ==> {{item.name}}
                </li>
             </transition-group>
            
            
        </div>
        
        <script type="text/javascript">
            
            var vm=new Vue({
                el:'#app',
                data:{
                    flag:true,
                    list:[
                        {id:1,name:"小明1"},
                        {id:2,name:"小明2"},
                        {id:3,name:"小明3"},
                        {id:4,name:"小明4"},
                        {id:5,name:"小明5"}
                    ]
                },
                methods:{
                    add(id,name){
                        this.list.push({id:id,name:name})
                    },
                    del(id){
                        this.list.splice(id,1)
                    }
                }
                
            })
            
            
        </script>
    </body>
</html>

 

posted @ 2020-06-01 20:39  三线码工  阅读(197)  评论(0)  编辑  收藏  举报