动画-实现列表删除时候渐渐上浮效果

最新推荐文章于 2022-02-10 10:45:39 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2022-02-10 10:45:39 发布

阅读量461

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wulianlang6162/article/details/99320173

版权

vue 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍如何在Vue.js中实现列表项的过渡动画效果，包括列表项的添加与删除动画，通过使用v-for和transition-group指令，结合CSS过渡属性，使列表在更新时呈现出流畅的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transform: translateY(80px)
}
.v-enter-active,.v-leave-active{
transition: all 0.6s ease;

       }
       li:hover{
           background-color: bisque
           
       }

/* 下面的.v-move和v-leave-active配合和使用，能够实现列表的飘上来效果 */
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}

id:

            </label>
            <label>
                    name:
                    <input type="text" v-model="name">

                </label>
                <input type="button" value="增加" @click="add">
        </div>
            <ul>
                <!-- 在实现列表过度的时候，如果需要过渡的元素，是通过v-for要用tranditionGroup-->
                <transition-group tag="" name="">
                        <li v-for="(item,i) in list" :key="item.id" @click="del(i)" >{{item.id}}----{{item.name}}</li>

                </transition-group>

            </ul>
            </div>
            </body>
            <script>
                new Vue(
                    {
                        el: '#app',
                        data: {
                            id:'',
                            name:'',
                           list:[
                               {id:1,name:'zhangsan',age:1},
                               {id:2,name:'李四',age:12},
                               {id:3,name:'王五',age:13}
                           ]
                        },
                        methods:{//这个mehtods属性就是定义了当前vue实例所有可以用的方法
                           add(){
                              this.list.push({
                                  id:this.id,name:this.name
                              })
                           },
                           del(i){
                            this.list.splice(i,1)
                           }
                        }
                    }
                )
            
            </script>