添加animate.css类，然后使用remove删除元素

I'm trying to add some css classes on my label/checkbox tick, then remove the classes and then remove the item once it's been checked. Though I'm struggling and only managing to do one or the other.

我正在尝试在我的标签/复选框上添加一些css类,然后删除这些类,然后在检查后删除该项。虽然我正在努力,只能做一个或另一个。

$(function () {
    $("label[for='<%= @todo.id %>']").click(function () {
        el = $("#todo-container-<%= @todo.id %>");
        el.addClass('animated fadeOut');
        el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            el.removeClass('animated fadeOut');
            el.remove();
        });
    });
});

Here I'm trying (in my complete.js.erb file) to on the label click (which checks the checkbox) add the animated and fadeOut classes to the container, and then remove the class as well as container element after it has faded.

这里我正在尝试(在我的complete.js.erb文件中)在标签上单击(检查复选框)将动画和fadeOut类添加到容器中,然后在它已经褪色后删除该类以及容器元素。

Can anyone help me out? My code is only doing 1 of my 2 requirements

谁能帮我吗?我的代码只执行我的2个要求中的一个

1 个解决方案

#1

You could look at the "animationend" event listener:

你可以看一下“animationend”事件监听器:

el.addEventListener("animationend", function().. , false);

More information can be found here:

更多信息可以在这里找到:

W3Schools animationend Event

W3Schools animationend活动

#1