How to do it...

Using the base project, create a new project for this recipe called customtransition 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. Create a new file named CustomTransition.vue in the src/components folder and open it. In the <template> section of the single file component, add the functional attribute to enable the functional rendering of the component. Then, create a Transition component, with the appear variable attribute defined as props.appear. Define the enter-active-class attribute as "animated slideInLeft" and the leave-active-class attribute as "animated...