在v-for循环中为更改元素添加动画

Question

我通过来自后端通话的v-for数据循环显示4个div：

<b-col v-for="n in articles" :key="n.id" class="random__record">

articles变量是在后端调用中收集的JSON

methods: {
    async getData() {
        try {
            const response = await axios.get(`/api/article/getRandom.php`, axiosConfig);
            this.articles = response.data.records;
            console.log(this.articles);
        } catch (e) {
            this.errors.push(e)
        }
    }
},

我每20秒执行一次getData()函数来更改这4个元素：

mounted() {
    setInterval(() => {
        this.getData();
    }, 20000);
},

我试图淡出和淡入这4个元素，所以它会看起来更好，不会立即改变，但很好的消失，然后4个新的淡入。我试图添加transition: 1s all到.random__record课程，但它没有完成。

.random__record {
    transition: 1s all;
}

如何在这里添加淡出和淡入4个新元素的动画？