在 CSS 和 jQuery 中重新激活 div 的问题

Question

您能否看看此演示，并让我知道为什么我无法在单击后重新制作动画。 CSS 规则和 jQuery 仅适用于首次点击。

<div class="animatetop"></div>
<button id="clicker">Click Me</button>
.animatetop {
    height:250px;
    width:250px;
    background-color:#FFCC33
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        animation-delay:2s;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        animation-delay:2s;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
        animation-delay:2s;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    animation-delay:2s;
}

$(document).ready(function () {
    $("#clicker").on("click", function () {
        // alert( "man nemidanam" );
        $('.animatetop').addClass('animated fadeInUp');
    });
});

Answer 1

一个

类只能向对象添加一次。一旦它在那里，再次添加它没有任何作用。动画完成后，您必须animated fadeInUp删除类。

一种方法是使用 setTimeout() ：

$(document).ready(function () {
    $("#clicker").on("click", function () {
        // alert( "man nemidanam" );
        $('.animatetop').addClass('animated fadeInUp');
        setTimeout(function(){
            $('.animatetop').removeClass('animated fadeInUp');
        }, 1500);
    });
});

JSFiddle

Answer 2

在这种情况下，

您可以使用 queue（） 和 deque（） 来添加和删除您的类：

$(document).ready(function () {
    $("#clicker").on("click", function () {
        // alert( "man nemidanam" );
        $('.animatetop').addClass('animated fadeInUp').delay(500).queue(function () {
            $(this).removeClass("animated fadeInUp");
            $(this).dequeue();
        });
    })
});

更新的小提琴