In Focus

Introduction To Angular 7 Animations Using Bootstrap 4

In this article, we will learn how to apply varieties of animations in Angular 7 application using Bootstrap 4.

Introduction
 
In this article, we will learn how to apply a variety of animations in an Angular 7 application using Bootstrap 4. 
 
Description 
 
Here, we can apply a variety of animations in our previous fully responsive Angular 7 application using Bootstrap 4 and will check this application in every type of virtual device, as well as, real-world smartphones.
 
Before going through this session, please visit my previous sessions related to Angular 7 application. 
Steps to be followed,
 
Step 1
 
Type the following command to install cross-browser animations on your machine.
 
npm install animate.css --save 
 
Step 2
 
Open angular.json file from your project and type below code in global styles section.
 
Code Ref
  1. "styles": [  
  2.               "src/styles.scss",  
  3.               "node_modules/animate.css/animate.min.css",  
  4.               "node_modules/bootstrap/dist/css/bootstrap.min.css"  
  5.             ]  
Code Description
 
The below line is the local path of already installed cross-browser animations.
 
node_modules/animate.css/animate.min.css 
 
The next line is the local path of already installed bootstrap 4 packages (as I have described how to install Bootstrap 4 in my last article).
 
node_modules/bootstrap/dist/css/bootstrap.min.css 
 
Also, we can access cross-browser animations using a CDN-hosted version.
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> 
 
Step 3
 
Then, open the app.component.html file and add the below class code of cross-browser animations in Div tag.
 
Code Ref
  1. <div class="main-view animated slideInleft">  
  2.     <app-navbar></app-navbar>  
  3.     <router-outlet></router-outlet>  
  4. </div>  
  5. <app-footer></app-footer>   
Code Description
 
To animate a Div element, I have added the class animated to an element. We also included the class infinite for an infinite loop. Then, we have to add one of the following classes to the element.
 
As I have used two of them in our project - slideInLeft and slideInRight.
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp
Get all the animations here.
 
Step 4
 
Type the following command to start the web server and get an output.
 
ng serve -o 
 
OUTPUT
 
In this output, the div element will slide from the left as I have used the slideInLeft class to the element.
 
Introduction To Angular 7 Animations Using Bootstrap 4 
 
In this output, the div element will slide from the right as I have used the slideInRight class to the element.
 
Introduction To Angular 7 Animations Using Bootstrap 4  
 
Here, we check a responsive web page using cross-browser animation and Bootstrap 4.
 
Introduction To Angular 7 Animations Using Bootstrap 4 
 
SUMMARY 
 
In this write-up, we have learned how to,
  • Install cross-browser animation package using Visual Studio Code.
  • How to use cross-browser animation in our Angular Application.
  • Make responsive web page cross-browser animation with Bootstrap 4.
  • Where to get all the cross-browser animation classes.