Creating an Angular animation with ngAnimate
Angular is a super famous Typescript framework that is available open-source and helps in building web applications for mobile and desktops. Usually Animation provides motion to the illusions within the web page. Using animations we can improve web applications and user experience too. Angular animation is typically built on CSS functionality that helps to build any property that the browser considers. Moreover, Angular animation includes positions, styles, sizes, colors, transforms, etc.
Angular is a structural framework that comes with many modules for web applications. Angular aims to simplify JavaScript code from writing and spending much time on it. Moreover, it helps in creating Single Page Applications easily.
There are many modules available for creating attractive animations within Angular. The main Angular animation modules are @angular/animations & @angular/platform-browsers.
To get in-Depth knowledge on Angularjs you can enroll for a live demo on Angularjs Online Training
Angular animation keyframes
The usage of keyframes() in Angular animation refers to a set of animation styles having optional offset data. It specifies the percentage of the total animation time that is applied. Here it uses animate () call. The keyframes explain how each style entry is applied and the place of the keyframe within the animation slot. Moreover, Angular animation uses many functions such as animate, style, transition, state, keyframes, sequence, etc. The animation takes place only for a given time frame with easy use of functions. Besides, the animation state is useful to move the animation element from one state to another.
Furthermore, we can create sequence and group animation functions. Here, the sequence function executes animations in a sequence whereas group function executes animation in parallel. Besides, the keyframes (..) method imports from @angular/animations. The method also accepts a single argument as an array of AnimationStyleMetaData. These arrays are also known as style () methods.
Take your career to new heights of success with Angular Training
Moreover, the keyframe() function with Angular animation allows the users to specify different interim styles. It takes place within a single transition where each style change occurs within the animation.
ng-animate slide
Angular animation declares under the @component that designs a class to separate it as a component to Angular. The animations are related to their host components through the decorator’s metadata. The ng-Animate is a collection of reusable and flexible animations that are useful in this technology. It helps to implement all the animations within animate.css. Moreover, to make applications ready for animations, it must include AngularJS animate library. The syntax used for all within the ngAnimate slide are as follows.
<body ng-app="ngAnimate">To add ng-animate as a dependency within the application module, in case of application name exist. We use,
<body ng-app="myApp"><h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide="myCheck"></div><script>var app = angular.module('myApp', ['ngAnimate']);</script>
The ngAnimate module helps to add/remove classes. The ngAnimate module within Angular animation doesn’t animate the elements of HTML of the users. Besides, there are several directives within AngularJS that are useful to add or remove different classes. They are;
- ng-hide
- ng-show
- ng-view
- ng-class
- ng-repeat
- ng-if
- ng-switch
Here, the ng-show & ng-hide directives are useful to add or delete the ng-hide class value. The ng-repeat directive is also useful to add ng-move class value during the HTML element changes its position. The ng-view adds the ng-enter class while entering the DOM. While leaving the DOM, it adds ng-leave class. Similarly, the ng-include & ng-repeat also state the same property values while adding or leaving the DOM. Moreover, the HTML element having a certain set of classes removes them after the animation completes.
Animating ng-view using CSS3 transitions
In Angular animation, the ng-view directive is useful as a container to reload a part of the page. It is useful when the user wants to switch between different views. Like adding or deletion of elements using ng-if, this is also done quickly. Moreover, if the user wants to animate the values entering or leaving the elements into the view, he can use the ng-enter, ng-enter-active, ng-leave, ng-leave-active, etc classes. Using the ng-animate class will provide the CSS rules that need while applying animation. Here, we can use a certain example of this.
.planet-view.ng-animate {transition: all ease 0.4s;position: absolute;}.planet-view.ng-enter {top: 200px;opacity: 0;}.planet-view.ng-leave,.planet-view.ng-enter.ng-enter-active {top: 0;opacity: 1;}.planet-view.ng-leave.ng-leave-active {top: -200px;opacity: 0;}
The above example explains about the atmospheric composition of planets. Here, we can see that there is a transition applied between the planet properties. During that, when any information enters the view regarding any planet, it starts the opacity with 0 and the top position sets to 200px. Besides, the elements that leave the view have the opacity of 1. Moreover, at the end of this transition, all the entering elements reach the top position of view and it becomes completely opaque.
Similarly, we can use ng-repeat for animating using some keyframe animations.
Angular animation callback
During the animation, it triggers a callback when the animation starts and closes. To show it, the user can log the value of an event by mentioning the below code.
import { Component, HostBinding } from "@angular/core";import {trigger,transition,style,animate,state} from "@angular/animations";@Component({selector: "app-root",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"],animations: [trigger("openClose", [state("true",style({ height: "200px", opacity: 1, backgroundColor: "yellow" })),state("false",style({ height: "100px", opacity: 0.5, backgroundColor: "green" })),transition("false <=> true", animate(500))])]})export class AppComponent {onAnimationEvent(event: AnimationEvent) {console.log(event);}}
Here, the onAnimationEvent callback is useful to state the animation begins and ends respectively. Moreover, it is useful for debugging also because it offers information regarding the state and elements of the animation.
Benefits of using animation in Angular
Using ngAnimate for creating animations in Angular gives more advantage to the users. It offers a different kind of directives and CSS stylesheets that help to design the page with more attractiveness. Designs and animations are helpful to make the content look better so that they can attract more viewers. Moreover, it will help any business to get their customers within their boundaries. Animations give the user a rich experience of viewing a good website or web page. It provides the illusions to the motions within the content.
It should be kept in mind while creating animations that they don’t use them repeatedly. Because it distracts the user’s mind and makes they move from the view. Especially it should be avoided in the main application. If the creator thinks it’s necessary to add animation in a particular space, then only he should add them.
Finally, we have gone through the process of creating Angular animation with ngAnimate and other keyframes that help in this regard. Angular animation gives much popularity to web pages and applications. It makes them attractive and improves its quality. The usage of ngAnimate along with some CSS properties helps the user to make dynamic web pages. Every user uses these views and styles to make the web application more creative and attractive. Moreover, it not only enhances the quality of the application but makes the viewer much engaged.
To get more insights into using animations one can opt for Angular Online Training from the industry experts like IT Guru. This learning may help to gain excellent skills in this regard to make a successful career in the IT field. Experience of learning practically can make the aspirant much better to stand in the market.
