Using the base project, create a new project for this recipe called animatecss and open the project folder. Now, follow these steps:
- Inside the project folder, open Terminal (macOS or Linux) or a Command Prompt/PowerShell (Windows) and execute the following command to install the Animate.css framework:
> npm install [email protected]
- Open the main.js file in the src folder and import the Animate.css framework:
import Vue from 'vue';
import App from './App.vue';
import 'animate.css';
- Open the App.vue file in the src folder and add a Transition component as a wrapper for the img HTML element. In the Transition component, add an attribute called enter-active-class and define it as "animated bounceInLeft". Then, add another attribute called leave-active-class and define it as "animated bounceOutLeft":
<transition
enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutLeft...