基于AngularJs Javascript的动画：动画不适用于ngIf或ngRepeat的内部元素

Question

仅在动画初始化期间存在元素的情况下，用于元素hide的javascript动画才能正常工作。对于添加的新元素，隐藏动画不起作用。

在我的示例中，单击“添加新项目”按钮时，插入的项目仅接受进入和离开动画。并且不喜欢使用'beforeAddClass'和'removeClass'的隐藏动画（它似乎仅对页面加载时存在的项目有效。在这种情况下，项目1 ）。

请帮助我理解为什么会发生这种情况，以及如何使动画在新添加的项目上起作用。

HTML

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <button class="btn btn-default" ng-click="add()">Add new item</button>
    <div class="fade-in" ng-repeat="item in items">
      <div class="fade-in alert alert-success" ng-show="!item.hide">Alert {{ x.value }}</div>
      <button class="btn btn-default btn-xs" ng-click="item.hide = !item.hide">Hide item</button>
    </div>
  </div>
</div>

脚本

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

app.controller('myCtrl', function ($scope, $element, $animate) {
  var i = 2;
  $scope.items = [{
    value: 1
  }];
  $scope.add = function () {
    $scope.items.push({
      value: i++
    });
  }

});

app.animation('.fade-in', function () {
  return {
    enter: function (element) {
      element.hide().fadeIn(500, 'swing');
    },
    leave: function (element) {
      element.fadeOut(500, 'swing', function () {
        element.remove();
      });
    },
    beforeAddClass: function (element, className) {
      if (className === 'ng-hide') {
        element.animate({
          opacity: 0
        }, 500);
      }
    },
    removeClass: function (element, className) {
      if (className === 'ng-hide') {
        element.animate({
          opacity: 1
        }, 500);
      }
    }
  }
});

https://codepen.io/balu25int/pen/zJgwYG

谢谢
u路