Vue中删除页面项时，后一个元素进入或上移要求有动画效果

作者: Jure_joe | 来源:发表于2020-05-25 16:28 被阅读0次

Vue中删除页面项时，后一个元素进入或上移要求有动画效果
项目中关于监听和移除scroll的坑
VUE首屏做一个加载中的lodaing动画
过渡、动画
【某元素每次进入视窗时均有动画效果】
如何用PPT切换效果制作时间轴推进动画？
Vue过渡动画
Vue中多个元素或组件的过渡
仿饿了么小球动画
Android Fragment元素共享打开页面有动画，返回没有

1、问题：删除页面项时，后一个元素进入或上移无动画效果

20200525_162002.gif

2、解决方案：添加css代码

.v-move{
  transition:all 0.6s ease;
}
.v-leave-active{
  position:absolute;
}

3、效果如下：

20200525_162106.gif

4、测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <style>
        .v-enter,.v-leave-to{
            transform:translateY(50px);
            opacity:0;
        }
        .v-enter-active,.v-leave-active{
            transition: all 0.6s ease;
        }
        li:hover{
            background-color: hotpink;
            transition:all 5s ease;
            width:100%;
        }
        /* 以下代码是成对使用的，删除表格中的某项内容时，避免删除元素后，下一个元素立即进入,没有触发动画效果 */
        .v-move{
            transition:all 0.6s ease;
        }
        .v-leave-active{
            position:absolute;
        } 
    </style>
    <body>
        <div id="app">
            编号：<input type="text" v-model="id" placeholder="请输入编号">&nbsp;&nbsp;
            姓名：<input type="text" v-model="name" placeholder="请输入姓名">
            <input type="button" value='添加' @click='add'>
            <transition-group appear tag='ul'>
                <!-- <ul> -->
                    <li v-for="(item,i) in list" :key='item.id' @click="del(i)">{{item.id}}-------{{item.name}}</li>
                <!-- </ul> -->
            </transition-group>
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                el:'#app',
                data:{
                    id:'',
                    name:'',
                    list:[
                        {"id":1,"name":'吕布'},
                        {"id":2,"name":'关羽'},
                        {"id":3,"name":'张飞'}
                    ]
                        
                },
                methods:{
                    add:function(){
                        this.list.push({id:this.id,name:this.name})
                    },
                    del(i){
                        this.list.splice(i,1);
                    }
                }
            })
        </script>
    </body>
</html>