javascript - 在动画内部运行方法或在两个动画之间运行方法

Question

如何在内部运行方法和动画？或者运行两个动画和它们之间的方法？我正在尝试添加一个 div，然后将其不透明度从 0 更改为 1，然后运行一个方法，然后再次将不透明度从 1 更改为 0，某种加载屏幕。 我只是试图将动画和方法一分为二，并使用带有“动画结束”的事件监听器，但无法正常工作(第一次运行时有效，第二次使用 changeScreen 方法时，classList 说是 null 错误说:“未捕获的类型错误:无法读取 null 的属性“classList” 在 HTMLDivElement。

这里是方法:

const screen = document.createElement('div'); //Const to add the load screen 

screen.id = 'screen';

function changeScreen(token){

document.body.prepend(screen);
document.querySelector("#screen").classList.add("screenOff");
document.querySelector("#screen").addEventListener("animationend", function(){
    loadScreen(loadFile(token));
    document.querySelector("#screen").classList.remove("screenOff"); 
    document.querySelector("#screen").removeEventListener("animationed", null);
    retrieveScreen();
},false);
}

function retrieveScreen(){

document.querySelector("#screen").classList.add("screenOn");
document.querySelector("#screen").addEventListener("animationend", function(){
    document.querySelector("#screen").classList.remove("screenOn"); 
    document.querySelector("#screen").removeEventListener("animationed", null);
    screen.remove();
},false);
}

该方法获取一个标记(数字)，然后我向主体添加一个名为 screen 的 div 元素并添加类 screenOff，这将启动 div 的动画变为黑色。然后使用事件监听器，我希望当屏幕变黑时，方法 loadScreen 会进行更改，然后我希望类更改为屏幕打开以将 div 从黑色变为不透明度 0，最后从屏幕上删除 div。 所有的工作除了删除停止第二个动画并且没有它 div 将在那里阻挡方式，这个方法应该执行多次做同样的事情。

如果有一种方法可以在一个动画示例中执行里面的 loadScreen 方法:

0% {opacity: 0;} 
50% {opacity: 1;} 
 ----- run loadScreen() then -----
50% {opacity: 1; }
100% {opacity: 0;}

会很好...

Answer 1

我找到了一种方法，使用 setinterval 我们可以添加和删除动画，我这样解决我的问题:

const screen = document.createElement('div'); //Const to add the load screen 

screen.id = 'screen';

//Function that calls the loadScreen and loadFile methods and manages the 
secuence of the screen changes.

function changeScreen(token){

let x = 0;
document.querySelector("#screen").classList.add("screenOff");

    let intervalID = setInterval(function () {

    if (x === 0) {  
    loadScreen(loadFile(token));
    load.play();
    document.querySelector("#screen").classList.remove("screenOff");
    document.querySelector("#screen").classList.add("screenOn"); 
    x++;
    }else{
    document.querySelector("#screen").classList.remove("screenOn");
    window.clearInterval(intervalID);
    }
}, 1400);   
}