Кажется, что анимация 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
СпасибоБалу