An animation occurs when the alteration of an HTML element creates the perception of movement. AngularJS, an older JavaScript framework succeeded by Angular (also known as Angular 2+), lacks built-in animation support. However, we can still add animations to our AngularJS applications using the ngAnimate module, which offers directives to handle CSS classes and animations.
In AngularJS, animations are handled using the ngAnimate module that supports CSS-based animations and transitions. Here’s a step-by-step guide on how to use animations in AngularJS.
ngAnimate moduleWe ensure that we include both AngularJS and the ngAnimate module in the HTML file. We can either download them and include them locally or use CDN links.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
ngAnimate dependencyIn the AngularJS application module, we declare a dependency on the ngAnimate module, as shown below:
var app = angular.module('myApp', ['ngAnimate']);
We use AngularJS directives and classes to apply animations in HTML. Here are some commonly used directives:
ng-show or ng-hide: We use them with the ng-animate class to animate the appearance or disappearance of an element.
ng-repeat: This directive in AngularJS automatically adds and removes elements. We can apply animations to these additions and removals.
ng-include: This directive in AngularJS allows us to import the content of an external HTML file or template into the current HTML file.
ng-switch: This directive in AngularJS lets us show different content based on specified conditions, similar to a switch statement in programming languages.
ng-if: This directive in AngularJS decides whether to show or hide elements in a web page. If a specified condition is true, the element is displayed; if false, it’s removed from the page.
Custom animations: We can define our custom animations using CSS. AngularJS automatically applies these animations when the associated directives are used.
We use AngularJS controllers or directives to dynamically add or remove animation classes based on user interactions or application state changes, as shown below:
<div ng-click="toggleAnimation()" class="custom-animation" ng-class="{ 'animated': animate }">Click me to toggle animation!</div>
app.controller('myCtrl', function ($scope) {$scope.animate = false;$scope.toggleAnimation = function () {$scope.animate = !$scope.animate;};});
In this example, the animated class is added or removed based on the value of the $scope.animate variable.
The following coding example shows the use of the ngAnimate module for creating a show/hide animation effect on red bars:
<!DOCTYPE html>
<html>
<style>
body {
font-family: 'Lato';
margin: 10px auto;
max-width: 800px;
text-align: center;
}
ul {
padding: 0;
margin-top: 20px;
text-align: center;
font-size: 1.1em;
}
ul li {
list-style: none;
display: inline-block;
padding: 5px 15px;
margin: 2px 0;
background: orange;
border-radius: 5px;
}
ul li a {
color: white;
text-decoration: none;
}
h1,
h2 {
margin: 10px;
text-align: center;
}
p {
width: 425px;
height: 30px;
border-radius: 5px;
background: cornflowerblue;
text-align: center;
margin: 5px auto;
color: white;
}
.red-bar {
background: red;
transition: all ease-in 2s;
height: 0px;
}
.red-bar.ng-enter.ng-enter-active {
height: 30px;
}
button {
border: none;
background: orange;
color: white;
padding: 10px;
margin: 10px;
margin-top: 40px;
width: 200px;
border-radius: 5px;
outline: none;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="toggleRedBars()">Toggle Red Bars</button>
<p ng-repeat="index in [1, 2, 3, 4]" ng-if="showRed" class="red-bar"></p>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function ($scope) {
$scope.showRed = false;
$scope.toggleRedBars = function () {
$scope.showRed = !$scope.showRed;
};
});
</script>
</body>
</html>
Lines 5–10: This block of CSS styles sets the overall styling for the body of the HTML document, specifying the font family, margins, maximum width, and text alignment.
Lines 12–31: These styles define the appearance of an unordered list (ul) and its list items (li). The list items have an orange background with white text.
Lines 33–37: This sets styling for heading elements (h1 and h2) by specifying margins and text alignment.
Lines 39–47: This styles paragraphs (p elements) with a fixed width, height, border radius, background color, and text alignment.
Lines 49–57: This CSS class, .red-bar, defines the styling for the red bars. It sets the background color to red, specifies a transition effect for all properties with an easing function and a duration of 2 seconds, and initially sets the height to 0 pixels.
Lines 59–70: This block of styles defines the appearance of buttons, specifying properties such as border, background color, text color, padding, margins, width, border radius, and cursor.
Lines 73–74: These script tags include AngularJS and the AngularJS ngAnimate module from the Google CDN.
Line 76: This sets up the AngularJS application, associating it with the myApp module and the myCtrl controller.
Line 78: This button is bound to the toggleRedBars function using the ng-click directive. When clicked, it toggles the visibility of the red bars.
Line 80: The ng-repeat directive creates red bars dynamically based on the elements in the array [1, 2, 3, 4]. The ng-if directive ensures that the red bars are only displayed when showRed is true.
Lines 82–92: This script block defines the AngularJS module myApp and includes the ngAnimate module as a dependency. It sets up the AngularJS application.
Now, run the application and see the animations.
Free Resources