Запустить метод внутри анимации или запустить метод между двумя анимациями

Как я могу запустить метод внутри и анимацию? или запустить две анимации и метод между ними? Я пытаюсь добавить div, затем изменить его непрозрачность с 0 на 1, затем запустить метод, а затем снова изменить непрозрачность с 1 на 0, что-то вроде экрана загрузки. Я просто попытался разделить анимацию и метод на две части и использовать прослушиватели событий с «концом анимации», но не работает должным образом (работает только при первом запуске, второй раз, когда используется метод changeScreen, classList говорит, что null, ошибка говорит: " Uncaught TypeError: не удается прочитать свойство classList со значением null в HTMLDivElement. "в document.querySelector (" # screen "). classList.remove (" screenOff ");)

вот методы:

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);
}

метод получает токен (число), затем я добавляю элемент div с именем screen в тело и добавляю класс screenOff, это запускает анимацию div, чтобы стать черным. Затем с помощью прослушивателя событий я ожидаю, что, когда экран заблокирован, метод loadScreen внесет изменения, тогда я хотел, чтобы класс изменился на screen, чтобы переключить div с черного на непрозрачность 0 и, в конце концов, удалить div с экрана. Все работает, за исключением того, что удаление останавливает вторую анимацию, и без него div будет блокировать путь, этот метод должен выполняться много раз, делая то же самое.

Если есть способ выполнить метод loadScreen внутри всего в одном примере анимации:

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

было бы здорово ...

0
0
33
1

Ответы 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);   
}

Другие вопросы по теме