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

When we change the height, the position of the ball also changes:

How it works...

The general principle here is that you have a state for an element or component. When the

state is numeric in nature, you can "tween" (from between) from one value to the other
following a specific curve or acceleration.

Let's break down the code, shall we?

The first thing we do is to take the specified new height for the ball and save it to the

newHeight variable:

const newHeight = Number(event.target.value)

In the next line, we are also saving our Vue instance in a _this helper variable:

const _this = this

The reason we do so will be clear in a minute:

const animate = (time) => {

requestAnimationFrame(animate)

TWEEN.update(time)

}

In the preceding code, we are wrapping all of our animation in a function. This is idiomatic

to the Tween.js library and identifies the main loop we will use to animate. If we have other
tweens, this is the place to trigger them:

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

.easing(TWEEN.Easing.Bounce.Out)

.to({ H: newHeight }, 1000)

.onUpdate(function () {

_this.height = this.H

})

.start()