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

The absence of HttpOnly Secure Cookies being transmitted

Convert HTML content to a PDF file with Java

Styling Text with Shadow Effects in Mobile Web Browsers

Updating the scope in Angular when changing the image source using ng-src is not working

Tips for customizing fonts in a WordPress object

Tips for ensuring an image fits perfectly within a MUI grid

Updating the AngularJS view following a deletion process

Enable AngularJS to automatically redirect to the login page when a user is not authenticated,

Guide on navigating through various HTML pages with distinct parameters using Node.js (Express server)

What is the best way to pause or stop the $interval when exiting the ui-state

Wrap a URL with link tags directive

Create paper "cut" borders using HTML canvas or pseudo-elements

The challenge of Angular form data binding

What is the best way to reduce the size of a Bootstrap card image back to its original dimensions when

Ways to time animations differently and activate two animations at the same time in every loop

Why dashes are incompatible with inner <span> elements?

Executing a function on each page within the head tag in Nuxt.js

Tips for fixing the position without affecting the width

Possible for jQuery autocomplete to reposition the list?

What is the reason for parent rows not stretching fully across the width of the page?