javascript - 使用 animate.css 构建一个每 6 秒更改一次 div 的简单代码

Question

我在这个简单的任务中做错了: 我有 2 个 div，都有 id，我希望一个每 6 秒替换另一个，仅此而已(使用 animate css 动画，进入和离开)。 这是我的 html:

 <div class="mood-area" style="position:relative">
        <div style="width:100%;height:100%;position:absolute" id="tickBox1">
           First div
        </div>
        <div style="width:100%;height:100%;position:absolute;display:none" id="tickBox2">
            <div class="flex-all flex-center" style="width:100%;height:100%;">
                Some other Div
            </div>
        </div>
    </div>

我每 6 秒间隔执行一次:( Angular 间隔)

 $interval(function(){
            //check which is the one with the display none, this should be the one that enters and the other one goes out
            var element         = null;
            var elementToReturn = null;
            if($('#tickBox2').css('display') == 'none')
            {
                element         = $('#tickBox1');

                elementToReturn = $('#tickBox2');

            } else {
                element         = $('#tickBox2');

                elementToReturn = $('#tickBox1');

            }
            element.addClass('animated slideOutDown');
            element.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                elementToReturn.addClass('animated slideInDown');
                elementToReturn.css("display", "block");
                element.css("display", "none");
                element.removeClass("animated slideInDown");
            });
        },6000);

第一个迭代很好，第二个开始跳变疯了，这段代码有什么问题吗？

Answer 1

因为您没有从 elementToReturn 中删除类，所以添加到您的函数中:

elementToReturn.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    elementToReturn.removeClass('animated slideInDown slideOutDown');
});

fiddle demo