jQuery和CSS动画-调用setTimeout重复动画时出现错误

Question

我有一个动画，可以在这里查看： https : //rimildeyjsr.github.io/st.anthony/#administration_page

校长和副校长的消息交替淡入和淡出，并且在完成后，我调用setTimeout在每16秒后循环播放一次动画。

我第一次调用该动画时效果很好。 第二次，只有主体的消息消失，然后在大约8秒钟内屏幕上没有任何内容。 此后，动画又进行了一次常规迭代，并且该错误再次发生。 我尝试使用开发人员工具对其进行调试，并且每次屏幕空白时，我都注意到该类未得到应用。 除此之外，没有错误。

任何帮助表示赞赏！

HTML：

<div class="group">
        <div class="left">
            <img src="images/the_principal.jpg" alt="school principal" class="admin-pic">
            <img src="images/mrs_cooke_optimised.png" alt="school vice principal" class="admin-pic">
        </div>
        <div class="right">
            <p class="text" id="principal">
                "Education is a simple yet a serious process. It is a process of making a human being into 'being human'.
                Stress at our institution is on this aspect.<br>I invite you to join us and make our country proud."
                <br><br>-The Principal
            </p>
            <p class="text" id="vice-principal">
                "We are all Indians firstly and lastly.Whatever anyone else might say, we need to uphold this God-given identity
                through our actions, thoughts and what we might say.<br>
                Long live the Indian Republic."
                <br><br> -The Vice Principal
            </p>
        </div>

CSS：

.left {
    float: left;
    width: 30%;
}

.right {
    float: right;
    width: 70%;
}

.group:after {
    content:"";
    display: table;
    clear: both;
}

.admin-pic {
    display: block;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    margin: 0;
    z-index: 10;
    width: 350px;
    height: auto;
    position: absolute;
    top: 20%;
    left: 25%;
    max-width: 100%;
    opacity:0;
}

.text {
    position: absolute;
    z-index: 10;
    margin:0;
    top :20%;
    left : 50%;
    color: white;
    text-align: justify;
    width: 40%;
    font-family: 'Cormorant Garamond',serif;
    font-weight:300;
    font-style: italic;
    text-align-last: center;
    opacity: 0;

}

.fadeInDownExit{
    -webkit-animation: fadeInDownExit 8s linear backwards;
    -o-animation: fadeInDownExit 8s linear backwards;
    animation: fadeInDownExit 8s linear backwards;
}

@keyframes fadeInDownExit {
    0%, 100% {
        opacity: 0;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    10%, 90% {
        opacity: 1;
        -webkit-transform: translateY(40%);
        -moz-transform: translateY(40%);
        -ms-transform: translateY(40%);
        -o-transform: translateY(40%);
        transform: translateY(40%);
    }

}
.fadeInUpExit{
    -webkit-animation: fadeInUpExit 8s linear backwards;
    -o-animation: fadeInUpExit 8s linear backwards;
    animation: fadeInUpExit 8s linear backwards;
}

@keyframes fadeInUpExit {
    0%, 100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }

    10%, 90% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

}

jQuery的：

function display(){
                $('.text').each(function () {
                    var delay = $(this).index();
                    $(this).css('animation-delay', delay*8 + 's');
                    $(this).addClass('fadeInUpExit').one(animationEnd, function(){
                        $(this).removeClass('fadeInUpExit');
                        $(this).css('animation-delay',0+'s');
                    });

                });

                $('.admin-pic').each(function () {
                    var delay = $(this).index();
                    $(this).css('animation-delay', delay*8 + 's');
                    $(this).addClass('fadeInDownExit').one(animationEnd, function(){
                        $(this).removeClass('fadeInDownExit');
                        $(this).css('animation-delay',0+'s');
                    });

                });
                setTimeout(display,16000);

            }
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

display();

Answer 1

我想说您用settimeout太早调用了display()重复，因此，动画在您重新启动显示并导致此错误之后就结束了。

例如，如果设置更长的超时，则不会发生此问题。

尝试将代码更改为此，以查看其是否正常工作：

setTimeout(display,16100);

更新

由于此更改指出了问题，因此我不建议您使用它作为解决方案。 最好的方法是仅使用动画事件，因为这是确保动画完成后重复代码的唯一方法。

您的代码第一部分的工作示例为：

var $txt = $('.text');
var incr = 0;

function display() {
  var $this = $txt.eq(incr);
  $this.one('animationend', function() {
    incr = incr ? 0 : 1;
    $this.removeClass('fadeInUpExit');
      display();
  });
  $this.addClass('fadeInUpExit');
}

display();