AngularJs Javascript-анимация: анимация не работает с внутренними элементами ngIf или ngRepeat - PullRequest
0 голосов
/ 19 сентября 2018

Кажется, что анимация 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

СпасибоБалу

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...