Vue中的列表动画

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表动画</title>
    <script src="../../vue/vue-v2.6.11.js"></script>
    <style>
        li {
            border: 1px dashed navajowhite;
            margin-top: 6px;
            line-height: 30px;
            font-size: 15px;
            width: 100%;
        }

        li:hover{
            background-color: hotpink;
            transition: all 0.5s ease;
        }

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

        /* 为元素移动时设置过渡动画
            注意: 必须设置v-leave-active的position: absolute
        */
        .v-move {
            transition: all 0.5s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app">
    <label>
        id: <input type="text" v-model="id">
        name: <input type="text" @keyup.enter="add" v-model="name">
        <button @click="add">添加</button>
    </label>
    <!--<ul>-->
    <!--
        appear: 页面刚加载时的入场动画;
        tag: 指定 transition-group 元素渲染为什么标签
    -->
        <transition-group appear tag="ul">
            <!-- 如果为 v-for 设置动画,必须为每个元素设置 key-->
            <li v-for="(item,index) in list" :key="item.id" @click="del(index)">
                {{item.id}} -----  {{item.name}}
            </li>
        </transition-group>
    <!--</ul>-->
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                {id: 1, name: '卡莎'},
                {id: 2, name: '薇恩'},
                {id: 3, name: '德莱文'},
                {id: 4, name: '大嘴'},
            ]
        },
        methods: {
            add() {
                this.list.push({id: this.id, name: this.name});
                this.id = '';
                this.name = '';
            },
            del(index) {
                this.list.splice(index, 1);
            }
        }
    });
</script>
</html>
键盘的打工仔
发布了62 篇原创文章 · 获赞 0 · 访问量 1247
私信关注
请陛下批阅

猜你喜欢
