Question

我想创建一个平滑移动块的函数。我更喜欢使用CSS选项'transition-duration'，但它似乎不适用于该位置。我查了一下，它确实适用于背景颜色...

CSS文件

 #cart {
            position: relative;
            transition-duration: 0.5s;
            background-color: green;
        }

JS档案

function start() {
    document.getElementById("cart").innerHTML = "test2";
    document.getElementById("cart").style.left = "100";
    document.getElementById("cart").style.background = "gray";
}

因此，当位置只是改变您使用该功能的瞬间时，背景颜色会在2秒内改变而不是立即改变。有没有办法在JS中使用style.left的'transition-duration'？或者我是否必须使用其他东西来使div顺利移动？

Answer 1

使用过渡：左0.5s线性;因为你还没有说过你正在过渡的财产。

此外，将要更改的样式放在类中，然后使用js应用该类。

此外，您可能希望在相对容器内转换绝对项，而不是将'left'应用于相对元素。

Answer 2

“左”的CSS在添加到JS之前未在CSS中声明。此外，“100”是CSS位置的无效值（请注意以下示例中添加的“px”）。

JSFiddle：https://jsfiddle.net/MissionMike/adj4j6tr/

HTML：

<div id="cart">TEST</div>

CSS：

#cart {
  position: relative;
  transition-duration: 0.5s;
  background-color: green;
  left: 0;
}

JS：

document.getElementById("cart").innerHTML = "test2";
document.getElementById("cart").style.left = "100px";
document.getElementById("cart").style.background = "gray";

使用transition-delay选项（css）和JS进行div移动

2 个答案: