ngAnimate - Animation not activating on recurring custom directive

Question

ngAnimate - Animation not activating on recurring custom directive

I am trying to implement ngAnimate on a custom directive that is repeated using ng-repeat in my AngularJS application. The animations function correctly when I use ng-repeat on a simple HTML list-item. However, when I replace the list-item with a custom directive element, the animation fails to trigger.

Can anyone point out what I might be missing or doing wrong in this scenario?

For reference, here is a Plunker demo showcasing the issue: Plunker Demo

HTML

<h3>Simple ng-repeat</h3>
<ul>
   <li class="animate-repeat" ng-repeat="val in testValues">{{ val }}</li>
</ul>

<h3>ng-repeat on custom directive</h3>
<ul >
    <animation-test class="animate-repeat" ng-repeat="val in testValues" test-val="val"></animation-test>
</ul>

Javascript

var app = angular.module('application', ['ngAnimate']);

app.controller('mainController', [ '$scope', mainController]);

function mainController($scope){

      // just for demo purposes
  $scope.testValues = [];

  $scope.addItem = function(){
    var len = $scope.testValues.length;
    $scope.testValues.unshift('Value #' + len);
  };

  $scope.removeItem = function(){
     $scope.testValues.pop();
  };

}

app.directive('animationTest', animationTest);

function animationTest(){

  return {
    template: ' <li> {{testVal}} </li> ',
    scope: {
      testVal: '<'
    }
  };
}

CSS (uses animate.css )

.animate-repeat.ng-enter {
    animation: 0.5s slideInUp;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move {
    animation: 0.5s slideOutDown;

}



@-webkit-keyframes slideInUp {
from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
}

to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     }
}

@keyframes slideInUp {
from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
}

to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

css angularjs animation angularjs-directive ng-animate

Answer 1

Answer №1

To ensure your code works correctly, bind the directive to an <li> element. Update the HTML for the directive like this:

<li animation-test class="animate-repeat" ng-repeat="val in testValues" test-val="val"></li>

Here's how you can define your directive:

app.directive('animationTest', animationTest);

  function animationTest(){

  return {
    template: '{{testVal}}',
    scope: {
      testVal: '<'
    }
  };
}

Check out a demo on CodePen

If you prefer a different approach, simply add a class to the directive element (e.g., directive-block) and apply animations directly to that element:

HTML:

<animation-test class="directive-block" ng-repeat="val in testValues" test-val="val"></animation-test>

CSS:

.directive-block {
  display: block;
  animation: 0.5s slideInUp;
}

.directive-block.ng-leave-active {
  animation: 0.5s slideOutDown;
}

See the results in this CodePen demo

Answer 2

To ensure your code works correctly, bind the directive to an <li> element. Update the HTML for the directive like this:

<li animation-test class="animate-repeat" ng-repeat="val in testValues" test-val="val"></li>

Here's how you can define your directive:

app.directive('animationTest', animationTest);

  function animationTest(){

  return {
    template: '{{testVal}}',
    scope: {
      testVal: '<'
    }
  };
}

Check out a demo on CodePen

If you prefer a different approach, simply add a class to the directive element (e.g., directive-block) and apply animations directly to that element:

HTML:

<animation-test class="directive-block" ng-repeat="val in testValues" test-val="val"></animation-test>

CSS:

.directive-block {
  display: block;
  animation: 0.5s slideInUp;
}

.directive-block.ng-leave-active {
  animation: 0.5s slideOutDown;
}

See the results in this CodePen demo

Answer 3

Answer №2

To implement the animation, you can utilize the replace property:

app.directive('animationTest', animationTest);

function animationTest(){

  return {
    template: ' <li> {{testVal}} </li> ',
    replace: true,
    scope: {
      testVal: '<'
    }
  };
}

Alternatively, you can include additional CSS:

.animate-repeat {
  display:block;
}

Answer 4

To implement the animation, you can utilize the replace property:

app.directive('animationTest', animationTest);

function animationTest(){

  return {
    template: ' <li> {{testVal}} </li> ',
    replace: true,
    scope: {
      testVal: '<'
    }
  };
}

Alternatively, you can include additional CSS:

.animate-repeat {
  display:block;
}

ngAnimate - Animation not activating on recurring custom directive

Answer №1

Answer №2

Similar questions

Is there a way to enable scrolling in the background when a modal is open?

AngularJS: Calculate the total sum of array elements for generating charts

The spacing within the table's <tr> elements does not get altered

The dynamically created dropdown menu is experiencing functionality issues

Can you explain the "parameters" in the Function link such as scope, element, and attrs in AngularJS?

What are the steps to create a unique popup div effect with jQuery?

Infinite scrolling with a dynamic background

Using ng-bind-html does not offer protection against cross-site scripting vulnerabilities

Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

Step-by-step guide: Creating a captivating triangular shape on the current tab

Struggling to retrieve elements using ng-repeat

Is there a way to retrieve the Boolean value from an ng-show attribute without having to re-evaluate the expression?

Is it recommended to incorporate "return" in my callback function when coding in JavaScript?

What is the best way to display audio files for clients using a combination of Node.js and AngularJS?

Angularjs's approach to managing HTTP connections through connection pooling

Incorporate text inside the border of a Material UI chip

The 3D Circle Flip feature on a certain webpage designed by Nordstrom is experiencing issues when viewed on Firefox

Navigating through states in AngularJS

Is there a way for me to make my navigation fill the entire height of the header?

Exploring the ins and outs of utilizing pseudo selectors with material-ui