How to make animation correctly?

Question

css

Ajax loads new content, if the array object has the new property, I give it the appropriate class:

<div class="list card" ng-class="{new: feed.new == true}">

It is necessary that it be like this:
as soon as an element with such a class appears, start a timer and delete this class after a while.
Tried something like this:

angular.module('tb.animation.feed', [])
  .animation('.new', function(){
    return {
      addClass: function(element, className){
        console.log('add class')
      },
      removeClass: function(element, className){
        console.log('remove class')
      }
    }
  });

angular.module('tb.animation.feed', [])
  .animation('.new', [function() {
  return {
    // make note that other events (like addClass/removeClass)
    // have different function input parameters
    enter: function(element, doneFn) {
      console.log('enter')
      //jQuery(element).fadeIn(1000, doneFn);

      // remember to call doneFn so that angular
      // knows that the animation has concluded
    },

    move: function(element, doneFn) {
      console.log('move')
      //jQuery(element).fadeIn(1000, doneFn);
    },

    leave: function(element, doneFn) {
      console.log('leave')
      //jQuery(element).fadeOut(1000, doneFn);
    }
  }
}]);

Neither the first nor the second example works.
How can I solve this problem?

Answer 1

Angular has $timeout , google it this way, animation is not so easy