javascript - 我正在尝试使用 jquery 或 javascript 回调一个简单的动画

Question

我的 .css 文件中的动画名为 @keyframes scrollTextTwo{}。我的 .js 文件中的代码是:

$(document).ready(function(){
  rightBox.style.animation = "scrollTextTwo 10s 1";
});

当我在浏览器中加载 .html 文件时，它会完美地运行一次，或者如果我将“1”替换为无限，它将无限运行:在 scrollTextTwo 10 之后。 我的问题是，如何才能从我的 .css 文件中获取第二个对象(例如 #leftBox)，以便仅在上面示例中的 #rightBox 完成其动画后进行动画处理。

我附上了所有三个文档:html/css/.js 和代码笔，以防有人想深入研究代码。

http://codepen.io/hoyos/pen/dGMGbX

Answer 1

您可以收听 animationend 事件。使用 .one() 方法附加事件监听器，使其只触发一次。当事件被触发时，这意味着动画已经结束，这意味着您可以在回调中为其他元素设置动画。

Updated Example

$('#rightBox').css('animation', "scrollTextTwo 5s 1").one('animationend', function () {
  $('#leftBox').css('animation', "scrollTextTwo 5s 1");
});