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）（将在其中播放动画的地方）：

它链接到与index.html中相同的CSS和脚本

<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')

在a.html中单击按钮并仍然使用相同的javascript文件时，如何在b.html中播放css动画？

1 个答案: