Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Transitions and Animations Chapter 13

Now, since we want the ball to animate in the new position whenever the enteredHeight

changes, one idea would be to bind the @change event of the input element:

<div id="app">

<input type="number" @input="move">

<div class="ball" :style="'top: ' + height + 'em'"></div>

</div>

The move method will be the one responsible for taking the current height of the ball and

slowly transitioning it to the specified value.

Before doing this, you will add the Tween.js library as a dependency. The official

repository is at https://github.com/tweenjs/tween.js. You can add the CDN link

specified in the README.md page if you are using JSFiddle.

Add the move method after adding the library, like this:

methods: {

move (event) {

const newHeight = Number(event.target.value)

const _this = this

const animate = (time) => {

requestAnimationFrame(animate)

TWEEN.update(time)

}

new TWEEN.Tween({ H: this.height })

.easing(TWEEN.Easing.Bounce.Out)

.to({ H: newHeight }, 1000)

.onUpdate(function () {

_this.height = this.H

})

.start()

animate()

}

}

Try to launch the app and see the ball bounce while you edit its height: