3

我正在练习 Vue转换组并专门在此特定部分中模仿 Vue 文档示例。

问题是我的示例将仅在结束元素而不是正在添加/删除的元素上应用动画。

有人可以解释我做错了什么吗？：（ 谢谢。

这是应用程序的链接以获取更多说明

<style>
<head>
body{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    background-color: #101010;
    color: white;
    text-align: center;
}
.flex{display:flex;justify-content:center;}

.test-enter{
    opacity: 0;
    transform: translateY(-20px);
}
.test-enter-to{
    opacity: 1;
}

.test-leave-to{
    opacity: 0;
    transform: translateY(20px);
}

.test-enter-active,
.test-leave-active{
    transition: 0.5s ease;
}
</style>
</head>
<body>
<br>

<div id='app'>
    <button @click='shuffle'>Shuffle</button>
    <button @click='add'>Add</button>
    <button @click='remove'>Remove</button>
    <br><br>
    
    <transition-group name='test' class='flex'>
        <div v-for='(num, ind) in arr' :key='ind' style='border: 1px solid red;'>{{ num }}</div>
    </transition-group>
</div>

<script>

let theArray = [1,2,3,4,5,6,7,8];

new Vue({
    el: '#app',
    data: {
        arr: theArray
    },
    computed: {
        arrLength(){
            return this.arr.length;
        }
    },
    methods: {
        shuffle(){
            alert('Not working yet');
        },
        add(){
            // Number from 1 - 9.
            let ranNum = Math.floor(Math.random()*9+1);
            //  Get a random index of current array length.
            let ranInd = Math.floor(Math.random()*this.arrLength);
            
            this.arr.splice(ranInd, 0, ranNum);
        },
        remove(){
            let ranInd = Math.floor(Math.random()*this.arrLength);
            
            this.arr.splice(ranInd, 1);
        }
    }
});

</script>
4

1 回答 1

3

只需将密钥更改为num而不是ind：

 <div v-for='(num, ind) in arr' :key='num' style='border: 1px solid red;'>{{ num }}</div>

因为这允许转换哪个数字而不是索引动画。

于 2020-08-07T21:12:26.637 回答