#angularjs #animation #angularjs-ng-repeat #angularjs-animation
#angularjs ( ангулярджс ) #Анимация #angularjs-ng-repeat #angularjs-анимация #angularjs
Вопрос:
Я использую ступенчатую функцию для угловой анимации (https://docs.angularjs.org/api/ngAnimate#css-staggering-animations).
Есть ли способ, которым я могу использовать это, а также сделать так, чтобы элементы не удалялись из DOM до тех пор, пока все анимации не будут завершены?
Я создал Плунжер, показывающий, о чем я говорю:http://plnkr.co/edit/xlVps9v0iINV11CYlUhG
Если вы нажмете «Добавить элементы», то все выглядит нормально. Если вы нажмете «Удалить элементы», все начнет рушиться, и эффект в шахматном порядке превратится в эпилептический кошмар.
Я полагаю, что в зависимости от того, как работает директива repeat, обходного пути может и не быть.
Ответ №1:
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope,$interval) {
$scope.name = 'World';
$scope.items = [];
$scope.addItems = function () {
for (var i = 0; i < 100; i ) {
$scope.items.push({ cls: 'class' (i % 3) });
}
};
$scope.removeItems = function () {
var k=100;
$interval(function(){
$scope.items.splice(k, 1);
k--;
}, 10,100);
};
});
Я бы предложил изменить оператор for для Sinterval, похоже, что оператор for выполняется слишком быстро, чтобы DOM мог правильно отобразить изменения.
проверьте плунжер