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();
        });
    });
});

动画后如何删除元素？

2 个答案: