AngularJS $animateCSS Service
Last Updated :
01 Feb, 2023
The $animateCss service in AngularJS allows developers to easily animate the addition or removal of CSS classes on an element. This feature can be useful for creating visually appealing transitions and adding polish to the user interface. To use the $animateCss service, the ngAnimate module must be included in the application.
Once the ngAnimate module has been included, the $animateCss service can be used in a controller or directive. To animate the addition of a CSS class, the $animateCss service can be used as follows:
Syntax:
app.controller('MyCtrl', function($scope, $element, $animateCss) {
$scope.addClass = function() {
var animation = $animateCss($element, {
event: 'add-class',
addClass: 'my-class'
});
animation.start();
};
});The $animateCss service will animate the addition of the "my-class" CSS class to the element using the "event" CSS animation defined in the stylesheet. To animate the removal of a CSS class, the $animateCss service can be used with the "removeClass" option instead of the "addClass" option. There are several options available for customizing the animations, such as the "duration", "delay", and "easing" options. More information on these options and other features of the $animateCss service can be found in the AngularJS documentation. The syntax for using the $animateCss service in AngularJS is as follows:
var animation = $animateCss(element, options);
animation.start();
The options object can include the following properties:
- addClass: The CSS class to be added to the element.
- removeClass: The CSS class to be removed from the element.
- duration: The duration of the animation in milliseconds.
- delay: The delay before the animation starts, in milliseconds.
- easing: The easing function to use for the animation.
- from: An object containing the starting CSS styles for the animation.
- to: An object containing the ending CSS styles for the animation.
Example 1: In this example, the $animate service is used to apply the bounce CSS class to the .animated-element element when the "Start Animation" button is clicked. The then function is used to specify a callback function that will be executed when the animation is complete.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
.bounce {
animation: bounce 1s;
}
h1 {
color: green
}
button {
color: white;
background-color: black;
height: 30px;
width: 200px;
padding: 3px;
margin-bottom: 60px;
border-radius: 5px;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.animated-element {
background-color: green;
height: 50px;
width: 50px;
border-radius: 10px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-animate.min.js">
</script>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('mainCtrl', function ($scope, $animate) {
$scope.startAnimation = function () {
var element =
document.querySelector('.animated-element');
$animate.addClass(element, 'bounce').then(function () {
// Animation complete
});
};
});
</script>
</head>
<body ng-controller="mainCtrl">
<center>
<h1> GeeksforGeeks</h1>
<button ng-click="startAnimation()">
Start Animation
</button>
<div class="animated-element"></div>
</center>
</body>
</html>
Output:
.gif)
Example 2: In this example, the $animate service is used to apply the bounce and spin CSS classes to the .animated-element element when the "Start Animation" button is clicked. The then function is used to chain multiple.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
h1 {
color: green
}
button {
color: white;
background-color: black;
height: 30px;
width: 200px;
padding: 3px;
margin-bottom: 60px;
border-radius: 5px;
}
.bounce {
animation: bounce 1s;
}
.spin {
animation: spin 1s;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animated-element {
background-color: green;
height: 50px;
width: 50px;
border-radius: 10px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-animate.min.js">
</script>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('mainCtrl', function ($scope, $animate) {
$scope.startAnimation = function () {
var element =
document.querySelector('.animated-element');
$animate.addClass(element, 'bounce').then(function () {
return $animate.addClass(element, 'spin');
}).then(function () {
return $animate.removeClass(element, 'spin');
}).then(function () {
// Animation complete
});
};
});
</script>
</head>
<body ng-controller="mainCtrl">
<center>
<h1> GeeksforGeeks</h1>
<button ng-click="startAnimation()">
Start Animation
</button>
<div class="animated-element"></div>
</center>
</body>
</html>
Output:
.gif)
Reference: https://docs.angularjs.org/api/ngAnimate/service/$animateCss
Similar Reads
AngularJS $interval Service
The $interval service in AngularJS is a function that allows you to execute a function repeatedly at a specified interval. It is similar to the setInterval function in JavaScript, but it is designed to work seamlessly with the AngularJS framework. To use the $interval service, it is first needed to
4 min read
AngularJS $parse Service
The $parse service in AngularJS is a function that takes an expression string and returns a function that can be used to parse and evaluate the expression. The expression string can contain variables, operators, and function calls. To use the $parse service, you first need to inject it into your Ang
3 min read
AngularJS $controller Service
AngularJS applications depend on a controller to control the flow of data through an AngularJS application. AngularJS architecture uses the MVC model i.e the Model View Controller. The model is responsible for maintaining the application data, the View for displaying data or some part of data to the
5 min read
AngularJS $document Service
In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $document serv
3 min read
AngularJS $location Service
The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read
AngularJS $cacheFactory Service
The $cacheFactory service in AngularJS is a factory function that creates new instances of the Cache object, which is a simple in-memory cache that stores key-value pairs. The Cache object is useful for storing data that is expensive to retrieve, such as data that comes from a server or data that is
5 min read
Angular.js $log Service
The $log service in Angular.js is simply used for logging purposes on the browser console. It is used for the debugging and troubleshooting of the error in the code. It has various implementations like a log, warn, info, error, and debugging, and all the names suggest. It is used for logging, warnin
5 min read
AngularJS Animations
To create animation effects in AngularJS using the ngAnimate module, which provides support for CSS-based animations. Animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using the ngAnimate module that gives us a combined effect
1 min read
Angular ng serve
When Creating an Angular Application, it is very important to have a robust and efficient development environment. Angular CLI provides several commands to make the development process easy.One of the most used commands is ng serve. This command allows you to build and serve the application locally.
5 min read
Angular10 Trigger Animation
In this article, we are going to see what is trigger in Angular 10 and how to use it. The trigger in Angular10 is used to create an animation trigger containing state and transition of the animation. Syntax: animate(name | definitions) NgModule: Module used by trigger is: animations  Approach: Cre
2 min read