Блог

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

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

#javascript #css-animations #addeventlistener #window.location

#javascript #css-анимации #addeventlistener #окно.Расположение

Вопрос:

Я создаю веб-сайт, на котором пользователи могут персонализировать свою пиццу. При нажатии кнопки 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 и скриптом, что и в index.html

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

Комментарии:

1. Вы перенаправляете на другую страницу и воспроизводите анимацию на другой странице, сделайте это на той же странице

Ответ №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')