Using the base project, create a new project for this recipe called transactionappear 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, do the following:
- Add an attribute called appear-active-class and define it as "animated jackInTheBox".
- Add an attribute called enter-active-class and define it as "animated jackInTheBox".
- Add another attribute called leave-active-class and define it as "animated rollOut".
- Add the...