Question

这件事使我发疯。

我有这个动画：

.animated-debug {
    -webkit-animation-duration: 5s;
            animation-duration: 5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
@-webkit-keyframes bounceInAlt {
    from, 70%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
                animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
                transform: scale3d(0, 0, 0);
    }
    70% {
        -webkit-transform: scale3d(1.01, 1.01, 1.01);
                transform: scale3d(1.01, 1.01, 1.01);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceInAlt {
    from, 70%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
                animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
                transform: scale3d(0, 0, 0);
    }
    70% {
        -webkit-transform: scale3d(1.01, 1.01, 1.01);
                transform: scale3d(1.01, 1.01, 1.01);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

.bounce-in-alt {
    -webkit-animation-name: bounceInAlt;
            animation-name: bounceInAlt;
}

这是获取动画结束事件的JavaScript：

 $("#my_id").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
        console.log("Entrato in animation end.");
    });

这里的问题是，此事件在动画真正结束之前触发，我希望它在5秒的持续时间后触发，并且只有一次，相反，它会在动画开始后一秒钟左右触发并多次触发。

我做错了什么？

编辑

在测试了一些解决方案之后，事实证明该问题导致了以下用途：

document.addEventListener("DOMContentLoaded", function() { ... });

作为脚本的包装，而不是使用jQuery：

$(document).ready(function() { ... });

包装程序完全解决了这个问题。

真的是出乎意料的行为，其他一些人有同样的问题吗？

Answer 1

我做了一个jsfiddle，您的代码对我有用，请参见https://jsfiddle.net/qt8znvsx/4/。我不确定HTML是否正确，因为您没有将其提供给我们，请您看看吗？

<div id="my_id">
    <div class="animated-debug bounce-in-alt">
        Helloo is it me? You're looking for
    </div>
</div>

我已经在Chrome和Firefox上对此进行了测试。

动画真正结束时不会触发Animationend事件

1 个答案: