transition-group

最新推荐文章于 2025-03-25 19:43:39 发布

MajorMe

最新推荐文章于 2025-03-25 19:43:39 发布

阅读量2.7k

点赞数

分类专栏： vue 文章标签： vue transition-group

本文链接：https://blog.csdn.net/qmz18778391913/article/details/100065724

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍如何在Vue项目中使用transition-group组件实现列表项的过渡动画，包括元素的进入、离开及移动动画效果，通过具体代码示例展示其用法。

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

transition-group的使用

代码：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./lib/vue-2.4.0.js"></script>
        <script src="./lib/iview.min.js"></script>
        <script src="./lib/vue-resource-1.3.4.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 通过v-for渲染的dom，需要用<transition-group></transition-group>包围起来，还有设定:key -->
            <transition-group name="myGroup">
                    <li class="mytable" v-for="(item,index) in list" :key="item.id" @click="del(index)">
                        {{item.id}}----{{item.name}}----{{item.nickname}}
                    </li>
            </transition-group>
            
        </div>
    </body>

    <script>
        Vue.http.options.root = 'http://localhost:3000/'
        var vm = new Vue({
            el:'#app',
            data() {
                return {
                    list:[],
                }
            },
            created() {
                this.$http.get('list').then(res => {
                    this.list = res.data;
                })
            },
            methods:{
                del(i){

                    this.list.splice(i,1);
                }
            },

        })
    </script>
    <style>
        .mytable {
            border: 1px dashed silver;
            line-height: 30px;
        }
        .mytable:hover {
            background-color:rgb(228, 230, 225); 
        }
        .myGroup-enter, .myGroup-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .myGroup-enter-active, .myGroup-leave-active {
            transition: all 2s ease;
        }

        /* v-move和v-leave-active实现删除一行，后面元素移位的动画效果 */
        .myGroup-move{
            transition: all 0.6s ease;
        }
        .myGroup-leave-active{
            position: absolute;
        }
    </style>
</html>

效果
在这里插入图片描述