Introduction To Angular 7 Animations 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. 

• A Look Into Angular 7 Navbar Application Using Bootstrap 4 
• Deploying Angular 7 App To Firebase Hosting (With Extra Tips)

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

"styles": [
              "src/styles.scss",
              "node_modules/animate.css/animate.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]

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

<div class="main-view animated slideInleft">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
</div>
<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.

 

 

 

In this output, the div element will slide from the right as I have used the slideInRight class to the element.

 

  

 

Here, we check a responsive web page using cross-browser animation and 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.