Vue - 过渡 列表过渡

Posted 2020-11-17 xiaobaiv

列表的进入/离开过渡

<div id="app" class="demo">
    <button @click="add">Add</button>
    <button @click="remove">Remove</button>
    <br>
    <br>
    <transition-group name="list">
        <span v-for="item in items" :key="item" class="list-item">{{item}}</span>
    </transition-group>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        num: 10
    },
    methods: {
        randomIndex () {
            // 获取不超过数组长度的随机数
            return Math.floor(Math.random() * this.items.length)
        },
        add () {
            this.items.splice(this.randomIndex(), 0, this.num++)
        },
        remove () {
            this.items.splice(this.randomIndex(), 1)
        }
    }
})
</script>
<style>
.list-item{
    margin-right: 10px;
    display: inline-block;
}
.list-enter-active, .list-leave-active{
    transition: all 1s;
}
.list-enter, .list-leva-to{
    opacity: 0;
    transform: translateY(30px);
}
</style>