CODEWITHSUNDEEP
vue.js
dfilkovi
dfilkovi

Reputation: 3091

Vue.js transition on data change

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

Upvotes: 9

Views: 13178

Answers (1)

Egor Stambakio
Egor Stambakio

Reputation: 18146

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

Upvotes: 2

Related Questions