jquery - 如何在动画后删除元素？

Question

我没有太多的 css 动画。我想在动画后删除一个元素。所以我正在使用 animate.css .我已经尝试了下面的代码，但它仍然无法正常工作。

function deleteDevice(id) {
    $('#'+id).addClass("animated bounceOutRight");
    $('#'+id).queue(function() {
        $(this).remove();
        $(this).dequeue();
   });
}

如何移除动画结束后的元素？

Answer 1

您可以检测动画何时完成。阅读here

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

$(document).ready(function() {  
  $('button').on('click', function() {
    deleteDevice('element');
  });
});


function deleteDevice(id) {
  $('#' + id).addClass("animated bounceOutRight");

  $('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(this).remove();
  });
}

@import url(http://daneden.github.io/animate.css/animate.min.css
);
 div {
  background: #abcdef;
  height: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Delete</button>
<div id="element"></div>