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

更新了小提琴