Vue中为列表添加动画删除添加淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<style>
    li{
        border: dashed 1px red;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        width: 100%;
    }
    li:hover{
        background-color: hotpink;
    }

    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translate(150, 180);
    }
    .v-enter-active, .v-leave-active{
        transition: all 1s ease;
    }

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


</style>

<body>
    <div id="app">
        id:<input type="text" v-model="id">
        name:<input type="text" v-model="name">
        <input type="button" value="添加" @click="add">

            <!-- 如何要给列表加动画必须要给循环的标签 加上key属性
            给<transition-group> appear属性实现页面入场时的效果
            通过为  <transition-group> tag属性指定为<transition-group>渲染为什么样的元素
            如果不写则渲染为span标签
            -->

            <transition-group appear tag="ul">
            <li v-for="(item, index) in list" :key="item.id" @click="del(index)">

            {{item.id}}----------------{{item.name}}

            </li>
                </transition-group>
        




    </div>


    <script>

        var app = new Vue({
            el: '#app',
            data:{
                list: [
                    {'id': 1, name: '椿'},
                    {'id': 2, name: '湫'},
                    {'id': 3, name: '大鱼'},
                    {'id': 4, name: '海棠'},
                ],
                id: '',
                name: ''
            },
            methods: {
                add(){
                    this.list.push({id: this.id, name: this.name})
                    this.id = this.name = ''
                },
                del(id){
                    console.log(id);
                    this.list.splice(id, 1)
                }
            },
            created: function () {

            },
            mounted: function () {

            }
        })

    </script>
</body>
</html>
Vue中为列表添加动画 删除添加淡入淡出

推荐阅读更多精彩内容

Vue中为列表添加动画删除添加淡入淡出
