Integrating with third-party CSS animation libraries such as animate.css

Graphical interfaces not only need to be usable and easy to understand; they should also provide affordability and be pleasant to use. Having transitions can help a great deal by giving cues of how a website works in a fun way. In this recipe, we will examine how to use a CSS library with our application.

Getting ready

Before starting, you can take a look at https://daneden.github.io/animate.css/, as shown, just to get an idea of the available animations, but you don't really need any special knowledge to proceed:

How to do it...

Imagine that you are creating an app to book taxis. The interface we will create will be simple and fun.

First of all, add the animate.csslibrary to the list of dependencies (refer to the Choosing a development environment recipe to learn how to do it).

To proceed, we need our usual wrapper:

<div id="app"> 
</div>

Inside, we will put a button to call for a taxi:

<button @click="taxiCalled...