Question

我做了一个小程序来来回动画图像。现在第一个jobbra按钮运行良好，图像向右边按像素动画像素，但我的后退按钮balra不起作用，图像不会移回到它的起点。有谁知道为什么，请帮忙。谢谢

var jobbAnim = 1;
var speed = 1;
var balAnim = 400;



function jobbra() {



    if (jobbAnim < 400) {
        jobbAnim = jobbAnim + speed;
    }


    document.getElementById("ilonakep").style.marginLeft = jobbAnim + "px";
    window.requestAnimationFrame(jobbra);

}


function balra() {
    if (balAnim >= 400) {

        balAnim = balAnim - speed;
    }
    document.getElementById("ilonakep").style.marginRight = balAnim + "px";
    window.requestAnimationFrame(balra);
}

<div id="container">
    <div id="ilonakep">
        <img src="/img/ilona.jpg" alt="ilona">
    </div>
</div>
<p id="gombok">
    <button onclick="balra()">Balra</button>
    <button onclick="jobbra()">Jobbra</button>
</p>

Answer 1

您应该使用cancelAnimationFrame确保一次只播放一个动画，否则每次单击其中一个按钮时都会启动一个新动画。我还建议你为元素的位置设置动画（或者更好，使用transform: translate();）而不是边距。它不像使用CSS过渡那样理想，但它使它更直观。

＆＃13;

var left = 0;
var speed = 1;
var anim;

function jobbra() {
    if (anim) {
        window.cancelAnimationFrame(anim);
    }


    if (left < 400) {
        left = left + speed;
    }

    document.getElementById("ilonakep").style.left = left + "px";
    anim = window.requestAnimationFrame(jobbra);
}


function balra() {
    if (anim) {
        window.cancelAnimationFrame(anim);
    }

    if (left > 0) {
        left = left - speed;
    }

    document.getElementById("ilonakep").style.left = left + "px";
    anim = window.requestAnimationFrame(balra);
}

＆＃13;

<div id="container">
    <div id="ilonakep" style="position: relative; display: inline;">
        <img src="/img/ilona.jpg" alt="ilona">
    </div>
</div>
<p id="gombok">
    <button onclick="balra()">Balra</button>
    <button onclick="jobbra()">Jobbra</button>
</p>

＆＃13;

Answer 2

试试这个：

var jobbAnim = 1;
var speed = 1;
var balAnim = 400;



function jobbra() {



    if (jobbAnim < 400) {
        jobbAnim = jobbAnim + speed;
    }


    document.getElementById("ilonakep").style.marginLeft = jobbAnim + "px";
    window.requestAnimationFrame(jobbra);

}


function balra() {
    if (balAnim > 399) {

        balAnim = balAnim - speed;
    }
    document.getElementById("ilonakep").style.marginLeft = balAnim + "px"; //This will reset the element to the left
    document.getElementById("ilonakep").style.marginRight -= balAnim + "px"; //This will move it to the left
    window.requestAnimationFrame(balra);
}
<div id="container">
    <div id="ilonakep">
        <img src="/img/ilona.jpg" alt="ilona">
    </div>
</div>
<p id="gombok">
    <button onclick="balra()">Balra</button>
    <button onclick="jobbra()">Jobbra</button>
</p>

Answer 3

使用纯CSS动画，您可以轻松修改它的外观。点击此处 - https://www.w3schools.com/css/css3_animations.asp

function addLeft() {
    document.getElementById("container").classList.add("slideLeft");
}
function addRight() {
    document.getElementById("container").classList.add("slideRight");
}

.slideRight {
    animation-name: slideRight;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
@keyframes slideRight {
    from {
        margin-left: 0;
    }
    to {
        margin-left: 50%;
    }
}

.slideLeft {
    animation-name: slideLeft;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
@keyframes slideLeft {
    from {
        margin-left: 50%;
    }
    to {
        margin-left: 0;
    }
}

<div id="container">
    <div id="ilonakep">
        <img src="/img/ilona.jpg" alt="ilona">
    </div>
</div>
<p id="gombok">
    <button onclick="document.getElementById('container').classList.add('slideLeft')">Balra</button>
    <button onclick="document.getElementById('container').classList.add('slideRight')">Jobbra</button>
</p>

动画回到它的起点

3 个答案: