CodeOrc.com - Learn by example
X
Make an RPG
Vue Implementations

Example of how to use State Transitions

Animating State with Watcher

First of all, if you need a refresher on v-model, check this out. As you'll recall v-model creates a 2 way binding between an input element and the data in our vue instance/component. This transition example is straight from the VUE docs: Transitioning State

<div id="demo"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <input v-model="mynumber" type="number" step="20"> <p>{{ animatedNumber }}</p> </div>
new Vue({ el: '#demo', data: { mynumber: 0, tweenedNumber: 0 }, computed: { animatedNumber: function() { return this.tweenedNumber.toFixed(0); } }, watch: { mynumber: function(newValue) { TweenLite.to(this.$data, 1.5, { tweenedNumber: newValue }); } } });
DO IT

The watch event handler for mynumber gets called whenever you change the number in the input box. Then TweenLite animates the number change.

In the next lesson, we will learn about Example of how to use slots in Vue

Get the Latest Tutorial Updates
<< >>
X