Injecting a dynamic animation class into a div using the controller

Question

Injecting a dynamic animation class into a div using the controller

I included an animation class in a div using a variable.

 <div class="{{ItemsChange}}"></div>

In my controller:

$scope.addItem=function(item){
  $rootScope.ItemsChange=''
  $rootScope.ItemsChange='animated pulse'
 }

However, I am facing an issue where the animation class is only applied the first time addItem is called. I want it to be applied every time. I initially set the variable to an empty string and then add the animation class so that 'animated pulse' gets applied each time $scope.addItem is called. How can I resolve this problem?

javascript angularjs animation

Answer 1

Answer №1

It seems that animate.css was mistakenly thought to be optimized for Angular animations, but unfortunately, it is not. To achieve the desired effect, simply reset $scope.ItemsChagne within a $timeout function. Therefore, include $timeout as a dependency in your controller and implement the following:

$scope.addItem = function(item) {
    $scope.ItemsChange = 'animated pulse';
    
    /**
     * Since each animation in animate.css lasts one second,
     * add a few extra milliseconds
     */
    $timeout(function() {
        $scope.ItemsChange = false;
    }, 1100); 
});

Although not the most elegant solution, it will get the job done.

UPDATE

Consider using ngClass instead, like this:

ng-class="{animated: ItemsChange, pulse: ItemsChange}"

View on plnkr

Answer 2

It seems that animate.css was mistakenly thought to be optimized for Angular animations, but unfortunately, it is not. To achieve the desired effect, simply reset $scope.ItemsChagne within a $timeout function. Therefore, include $timeout as a dependency in your controller and implement the following:

$scope.addItem = function(item) {
    $scope.ItemsChange = 'animated pulse';
    
    /**
     * Since each animation in animate.css lasts one second,
     * add a few extra milliseconds
     */
    $timeout(function() {
        $scope.ItemsChange = false;
    }, 1100); 
});

Although not the most elegant solution, it will get the job done.

UPDATE

Consider using ngClass instead, like this:

ng-class="{animated: ItemsChange, pulse: ItemsChange}"

View on plnkr

Injecting a dynamic animation class into a div using the controller

Answer №1

Similar questions

Error: The <Class> cannot be accessed until it has been initialized

Using ES6 Promises with jQuery Ajax

Implement a PUT method in Express that returns an empty array

Is there a way to display only the specific child div within the parent div using JavaScript without affecting the others?

Having trouble obtaining the correct event target id with Jquery sortable and draggable

What is the best way to convert an HTML string into a DOM element using jQuery?

Delay the rendering of the MUI DataGrid column until after the DataGrid is visible on the screen

A guide on sending arrays to an AngularJS application through a URL with the help of the ui.router module

The eBay API is providing users with small thumbnail images with low resolution

Using Vue JS to apply a filter to data fetched from an API

The functionality of Bootstrap Tabs is compromised when used within a jQuery-UI dialog window

Having issues with my custom AngularJS directive functionality

Matching conditions in MongoDB are contingent upon specific requirements

How can I change an element using jQuery's getElementById method?

execute a JavaScript script across numerous HTML documents

What is the most efficient way to calculate the total sum of all product amounts without using Jquery?

Modify the height of an element in real-time using jQuery

Colorbox's functionality struggles to uphold several groups simultaneously without encountering errors

Guidelines on how to dissect a JavaScript code or array using C#

The 2-way data binding feature in AngularJS is failing to function when used with a factory in a MEAN stack application