Question

我正在尝试使用DOM为对象设置动画，并且在其CSS属性 position 未设置为“绝对”时，试图为该元素设置动画。这是我的代码如下：

我创建了一个圆形HTML元素，并尝试将其移动45度。有什么方法可以动画未定位为绝对的HTML元素对象？

 x = 10;
    
function on_click() {

    var myCurvyMovement = document.getElementById("circle");
    myCurvyMovement.style.left = 0.5 * x;
    myCurvyMovement.style.top = 1 + x

    x += 10;

}

 #circle {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */
#divBox {
    position: static
}

<body>
    <button style="display:block" onclick="on_click()">Move the box</button>
    <div id="circle">
    </div>
</body>

Answer 1

您忘记连接“ px”以设置x和y位置

 x = 10;
    
function on_click() {

    var myCurvyMovement = document.getElementById("circle");
    myCurvyMovement.style.left = 0.5 * x + 'px';
    myCurvyMovement.style.top = 1 + x + 'px';

    x += 10;

}

 #circle {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */
#divBox {
    position: static
}

<body>
    <button style="display:block" onclick="on_click()">Move the box</button>
    <div id="circle">
    </div>
</body>

当不是绝对的时，您需要更改margin-left和margin-top属性，在javascript中是这样的 myCurvyMovement.style.marginLeft = 1 + x + 'px'

myCurvyMovement.style.marginTop = 1 + x + 'px'

（顶部/底部和左侧/右侧）

Answer 2

我不会考虑left / right来制作动画。如您所知，由于需要定位元素，因此它无法在所有情况下都起作用。即使使用定位元素，您在relative，absolute和fixed之间也不会有相同的行为，因为每个元素对top / {{1}都有自己的引用}。

在这种情况下，最好考虑transform，您可以将其应用于任何元素（shouldn't be an inline element），并且运动的参考对于所有元素都是相同的。您还将获得更好的性能。

left

x = 10;
    
function on_click() {

    var myCurvyMovement = document.getElementById("circle");
    myCurvyMovement.style.transform = "translate(" + (0.5 * x)+"px,"+(1 + x)+"px)";
    x += 10;

}

#circle {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50px;
    transition:0.5s all; /*to have a smooth movement*/
}

动画只能应用于“绝对”定位的元素吗？

2 个答案: