如何在动画后删除元素？

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>

Answer 2

添加将在动画结束时触发的回调函数，此时您可以删除/隐藏您的 HTML。

在下面的代码中，我从 DOM 中删除了动画 div，你可能只是隐藏它。

http://jsfiddle.net/yhwebLon/2/

<button>Start Animation</button>

<div id="target" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>




$(document).ready(function(){
    $("button").click(function(){
        $("#target").animate({left: '250px'}, function(){
            alert('animation done');
            $("#target").remove();
        });
    });
});