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

This is the API call to our library. First, we are creating an object that will hold a copy of the

height value in lieu of our component. Normally, here you put the object that represents the
state itself. Due to Vue limitations (or Tween.js limitations), we are using a different

strategy; we are animating a copy of the state and we are syncing the true state for every

frame:

Tween({ H: this.height })

The first line initializes this copy to be equal to the current actual height of the ball:

easing(TWEEN.Easing.Bounce.Out)

We choose the easing to resemble a bouncy ball:

.to({ H: newHeight }, 1000)

This line sets the target height and the number of milliseconds the animation should last
for:

onUpdate(function () {

_this.height = this.H

})

Here, we are copying the height of the animation back to the real thing. As this function

binds this to the copied state, we are forced to use ES5 syntax to have access to it. This is

why we had a variable ready to reference the Vue instance. Had we used the ES6 syntax,
we would not have any way to get the value of H directly.

Packaging reusable transitions into components

We may have a significant transition in our website that we want to reuse throughout the

user funnel. Packaging transition into components can be a good strategy if you are trying

to keep your code organized. In this recipe, you will build a simple transition component.