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

Getting ready

To complete this recipe, you will need at least some familiarity with JavaScript. The
technicalities of JavaScript are out of the scope of this book, but I will break the code down

for you in the How it works... section, so don't worry too much about it.

How to do it...

In our HTML, we will add only two elements: an input box in which we will enter the
desired position of our bouncy ball and the ball itself:

<div id="app">

<input type="number">

<div class="ball"></div>

</div>

To properly render the ball, write this CSS rule and it will appear on the screen:

.ball {

width: 3em;

height: 3em;

background-color: red;

border-radius: 50%;

position: absolute;

left: 10em;

}

We want to control the bar Y position. To do that, we will bind the top property of the ball:

<div id="app">

<input type="number">

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

</div>

Height will be part of our Vue instance model:

new Vue({

el: '#app',

data: {

height: 0

}

})