AngularJS $animateCSS Service

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.

Output:

👁 Image

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.

Output:

👁 Image

Reference: https://docs.angularjs.org/api/ngAnimate/service/$animateCss