Question

请你看一下This Demo，让我知道为什么我无法在一次点击后重新制作动画动画。 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();
        });
    })
});

<强> Updated Fiddle

关于在CSS和jQuery中重新设置div的动画的问题

2 个答案:

JSFiddle