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=
</script>
<script src=
</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:
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=
</script>
<script src=
</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:
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 Services
The Services is a function or an object that avails or limit to the application in AngularJS, ie., it is used to create variables/data that can be shared and can be used outside the component in which it is defined. Service facilitates built-in service or can make our own service. The Service can on
4 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
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
AngularJS $rootElement service
The AngularJS $rootElement service is a global service that provides a reference to the root element of the AngularJS application. This can be useful in a variety of scenarios, such as modifying the root element's class name or attributes, or traversing the root element's descendants. Syntax: The sy
3 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: Create
2 min read
Angular10 State Animation
In this article, we are going to see what is State in Angular 10 and how to use it. The State in Angular10 is used to create an animation trigger containing state and transition of the animation. Syntax: State(name, style, options) NgModule: Module used by State is: animations Approach: Create an an
2 min read