How to do it...

Using the base project, create a new project for this recipe called transactionhooks and open the project folder. Now, follow these steps:

1. 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]

2. 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';

3. Open the App.vue file in the src folder. In the <script> section of the single file component, in the data property, in the singleton function, add a new property called status with the value defined as "appeared":

data: () => ({
  display: true,
  status: 'appeared',
}),

4. Create a methods property and define it as a JavaScript object. Inside the object, add two properties called onEnter and onLeave. In the onEnter property...