Как реализовать transition на reactive переменной во vue js?

Question

[Евгений]

Вопрос - каким образом реализовать смену элемента через fade используя transition тег или любым другим способом.
Желаемый результат: текст комментария раз в 5 секунд меняется на следующий и при этом текст предыдущего комментария постепенно исчезает, а следующего - постепенно появляется.
Без использования transition текст меняется (переменная реактивна), но делает это "моментально", а хочется применить анимацию "угасания".

Код в template:

<template>
    <transition name="fade">{{Comments[currentComment].comment}}</transition>
</template>

Код в скрипте:

<script>
    export default {
        name: "Comments",
        components: {
            Comment
        },
        data () {
            return {

                Comments:[
                    {id: 1, comment: 'I like working with your company. The website is well organized and makes updating and mapping properties easy. I honestly don’t have any complaints. Everything is great. Thank you.', name: 'Paul Miraldi', nameComment: 'Works with the program for 6 months', image: '/storage/landing/customers/1.png'},
                    {id: 2, comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus leo vel risus cursus, non rhoncus felis vehicula. Curabitur elit lorem, pulvinar ut malesuada et, ultricies nec mauris.', name: 'John Smith', nameComment: 'Works with the program for 10 months', image: '/storage/landing/customers/2.png'},
                    {id: 3, comment: 'Pellentesque sit amet aliquam erat. Integer congue dui a molestie hendrerit. Aliquam pellentesque ante libero, semper rhoncus dolor ultricies quis.', name: 'August Aurelius', nameComment: 'Works with the program for 1 month', image: '/storage/landing/customers/3.png'},
                    {id: 4, comment: 'Aenean id leo tempor, malesuada mi sit amet, cursus diam. Duis tristique et lorem a pellentesque. Vivamus tincidunt fringilla massa, in tristique enim semper nec.', name: 'Vasya Pupkin', nameComment: 'Works with the program for 1 year', image: '/storage/landing/customers/4.png'},
                    {id: 5, comment: 'Integer vitae risus aliquet, varius orci in, pharetra mi. Nullam eu quam sed arcu porttitor lacinia ut a augue. Suspendisse ultricies nunc in ex maximus, id tempus ligula efficitur.', name: 'Roman Smirnov', nameComment: 'Works with the program for 3 years', image: '/storage/landing/customers/5.png'},

                ],
                currentComment: 0,


            }
        },
        methods: {
            nextComment(){
                if(this.currentComment >= this.Comments.length - 1){
                    this.currentComment=0
                }
                else {
                    this.currentComment++
                }
            },
        },
        mounted(){
                let vm = this;

                setInterval(function(){
                    vm.nextComment()
                }, 5000)

        }
    }
</script>

Стили:

<style lang="scss">

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ {
        opacity: 0;
    }

</style>

В документации написано, что transition будет работать в четырех случаях:
- Условная отрисовка (используя v-if)
- Условное отображение (используя v-show)
- Динамические компоненты
- Корневые элементы компонентов

Но я не могу понять, как для этой ситуации применить какой-то из этих случаев

Answer 1

[Евгений]

Реализовал задачу через v-bind, при этом подставив в него ид текущего комментария. Также указал метод работы transition через mode=out-in, чтобы сначала исчезал старый комментарий, потом появлялся новый.

<transition mode="out-in" name="fade">
    <div v-bind:key=currentComment>
        {{Comments[currentComment].comment}}
    </div>
</transition>

Answer 2

[0xD34F]

https://jsfiddle.net/d9bfpxo4/