Как я могу воспроизвести анимацию CSS в b.html при нажатии кнопки в файле a.html и при этом использовать тот же файл javascript?

Question

Я создаю сайт, где пользователи могут персонализировать свою пиццу.Если нажата кнопка deliverPizzaButton, я хочу перенаправить пользователя на другую html-страницу, где будет воспроизводиться анимация, которая позволит им узнать, что пицца уже в пути.

Это то, что у меня сейчас есть в моемjavascript, он перенаправляет на второй HTML, но анимация не воспроизводится во втором html

var pizzaDelivererImg = document.getElementById('pizzaDeliverer');


function changeHTML() {
    if (deliverPizzaButton.classList == ('readyToDeliver')) { // when all the steps are completed the button will change color and the button can be clicked
        window.location.href = 'pizzaAnimation.html';
        playAnimation();
    }
}

deliverPizzaButton.addEventListener('click', changeHTML);

function playAnimation() {
    if (window.location.href == 'pizzaAnimation.html') {
        pizzaDelivererImg.classList.add('letTheDelivererDrive');
    }
}

CSS:

.letTheDelivererDrive {
    animation: animationFrames ease-in-out 4s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    /*when the spec is finished*/
    -webkit-animation: animationFrames ease-in-out 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    /*Chrome 16+, Safari 4+*/
    -moz-animation: animationFrames ease-in-out 4s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    /*FF 5+*/
    -o-animation: animationFrames ease-in-out 4s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    /*Not implemented yet*/
    -ms-animation: animationFrames ease-in-out 4s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
    /*IE 10+*/
}

@keyframes animationFrames {
    0% {
        transform: translate(-355px, -31px);
    }
    100% {
        transform: translate(309px, -26px);
    }
}

@-moz-keyframes animationFrames {
    0% {
        -moz-transform: translate(-355px, -31px);
    }
    100% {
        -moz-transform: translate(309px, -26px);
    }
}

@-webkit-keyframes animationFrames {
    0% {
        -webkit-transform: translate(-355px, -31px);
    }
    100% {
        -webkit-transform: translate(309px, -26px);
    }
}

@-o-keyframes animationFrames {
    0% {
        -o-transform: translate(-355px, -31px);
    }
    100% {
        -o-transform: translate(309px, -26px);
    }
}

@-ms-keyframes animationFrames {
    0% {
        -ms-transform: translate(-355px, -31px);
    }
    100% {
        -ms-transform: translate(309px, -26px);
    }
}

HTML 1 (index.html) (где кнопкабудет нажата кнопка перенаправления):

<img id="pizzaDeliverer" src="img/pizzadeliverer.png" alt="pizza deliverer">

HTML 2 (pizzaAnimation.html) (где будет воспроизводиться анимация):

она связана с тем же CSS и сценарием, что и в индексе.html

<img id="pizzaDeliverer" src="img/pizzadeliverer.png" alt="pizza deliverer">

Answer 1

Проблема в том, что вы пытаетесь запустить код после того, как браузеру сказали выгрузить текущую страницу и перейти на другую.

    window.location.href = 'pizzaAnimation.html';
    playAnimation(); //<-- this won't happen because of ^^

Таким образом, по сути вы говорите, чтобы анимация воспроизводилась на первой странице, а не на второй. Вместо этого вам нужно изменить JS, чтобы он действовал onload для второй страницы, а затем запустить анимацию.

function playAnimation() {
    pizzaDelivererImg.classList.add('letTheDelivererDrive');
}
if (window.location.href == 'pizzaAnimation.html') playAnimation();

Также обратите внимание, что

deliverPizzaButton.classList == ('readyToDeliver')

... не является правильной, масштабируемой реализацией classList. Лучше было бы:

deliverPizzaButton.classList.contains('readyToDeliver')