Vue.js Übergang auf Datenänderung

Question

In Vue Dokumentation gibt es nur ein Beispiel, wie Element ein- oder ausblenden, aber was, wenn Sie einen Übergang basierend auf Wertänderung zeigen möchten. Zum Beispiel, wenn der neue Wert höher als alt ist, dann zeige einen Pfeil nach oben für 3 Sekunden und wenn der Wert niedriger als der alte Wert ist, zeige den Pfeil für 3 Sekunden nach unten. Wie kann ich das erreichen? Hier

ist die 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 
}) 

Wie Sie sehen können, CSS .change-enter-aktiv nur auf den ersten Änderung ausgelöst wird nachdem das Element in bleibt und keine Änderung an allen

ausgelöst

Answer 1

zum Beispiel (nicht getestet):

in Vorlage:

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

in Skriptabschnitt:

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