Question

function firstRun() {
   rightBox.style.animation = "TextEffectMadeWithCSS 10s";
}

function secondRun() {
   rightBox.style.animation = "TextEffectMadeWithCSS 10s";
}

我不想使用Jquery，因为我是javascript的初学者。我不能在这个层次上理解大多数Jquery语法

Answer 1

您可以使用animationend个活动。

function firstRun(){
    rightBox.style.animation = "TextEffectMadeWithCSS 10s";
    rightBox.addEventListener('animationend', secondRun); //once it's finished.
}

function secondRun(){
    rightBox.style.animation = "TextEffectMadeWithCSS 10s";
    rightBox.removeEventListener('animationend', secondRun);
    //remove the listener so this doesn't loop.
}

Answer 2

您可以从第一个函数调用第二个函数：

var firstRun = function() {
    rightBox.style.animation = "TextEffectMadeWithCSS 10s";
    secondRun();
}

var secondRun = function() {
    rightBox.style.animation = "TextEffectMadeWithCSS 10s";
}

我有两个函数，我希望第二个函数在第一个函数完成后运行它的动画

2 个答案: