首页 > 其他 > 详细

Vue - 过渡 列表过渡

时间:2018-06-14 10:53:36      阅读:164      评论:0      收藏:0      [点我收藏+]

列表的进入/离开过渡

<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>

Vue - 过渡 列表过渡

原文:https://www.cnblogs.com/xiaobaiv/p/9181240.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!