Как удалить элемент после анимации?

Question

[Denoro55]

var animator = $('.animator');

setInterval(function(){
  var obj = $('<div></div>');
  obj.addClass('block');
  animator.append(obj)
},500)

$('body').on('animationend','.block',function(e){
	$(this).remove();
})

Почему то удаляются все блоки когда один из них закончил анимацию

https://jsfiddle.net/epcyx9jw/

Answer 1

[0xD34F]

удаляются все блоки когда один из них закончил анимацию

Удаляется один. А у остальных анимация сбрасывается. Потому что анимация привязана к порядковой позиции элемента внутри родителя относительно соседей. Убрали первый, у остальных позиция изменилась, анимация сбросилась - поэтому кажется, будто элементы были удалены (а новые внезапно добавились).

Анимацию надо привязывать к чему-то, что своего значения не изменит. Например, можно добавлять элементам дополнительные классы вида block-*, и так же через @for генерировать для них css, как сейчас у вас это делается для :nth-child(*). Например.

Answer 2

[nvdfxx]

вы все блоки с классом .block удаляете, дайте ссылку на фиддл

Comments

[Denoro55]

https://jsfiddle.net/epcyx9jw/

[Denoro55]

а или все работает просто nth-child меняются и у других анимация заново начинается