学习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 @   三线码工  阅读(198)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示