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
Share your thoughts in the comments
Please Login to comment...