Vue.js transition on data change

Question

In Vue documentation there is only example how to show or hide element but what if you want to show some transition based on value change. For example if new value is higher then old then show an arrow up for 3 seconds and if value is lower than old one show arrow down for 3 seconds. How can I achieve that?

Here is the jsfiddle: http://jsfiddle.net/d2hs7muq/2/

var data = {
    number: 1
}

Vue.component('odd',
{
    props: ['number', 'oldNumber'],
    template: `<div>{{number}} 
        <transition name="change">
        <div v-if="oldNumber && number > oldNumber"class="up">up</div>
        <div v-if="oldNumber && number < oldNumber" class="down">down</div>
        </transition>
    </div>`,
    watch:
    {
        number: function(number, oldNumber)
        {
            var me = this;
            me.oldNumber = oldNumber;
        }
    }
});

var demo = new Vue({
    el: '#demo',
    data: data
})

As you can see css .change-enter-active gets triggered only on first change after that element stays in and no change is triggered at all

Answer 1

for example (not tested):

in template:

<transition name="somewhat" appear>
<div class="up" v-if="bigger" key="up"></div>
<div class="down" v-else key="down"></div>
</transition>

in script section:

data: function() {
    return: {
        value: null,
        bigger: false
    }
}
computed: {
    ...mapGetters([
        'getYourStoreValue'
    ])
},
watch: {
    // value has changed
    getYourStoreValue: function() {
        let old = this.value;
        if (this.getYourStoreValue > old) {
            this.bigger = true;
        } else {...etc...}
        // save new value to 'value' data property
        this.value = getYourStoreValue;
    }
}