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

【问题标题】：Use the transition-delay option (css) and JS to make a div move使用transition-delay选项（css）和JS进行div移动
【发布时间】：2016-10-06 22:10:39
【问题描述】：

我想创建一个平滑移动块的函数。我更喜欢为此使用 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 使用“过渡持续时间”？还是我必须使用其他东西才能使 div 平滑移动？

答案：

解决方案是，要让 transition-duration 做任何事情，它必须事先声明。这意味着因为我没有在非动画状态下指定位置，所以运动会立即完成。另一个解决方案是使用transition: left 0.5s，因为这不需要任何 CSS 样式。

【问题讨论】：

尝试最初在 CSS 中声明 left。（背景颜色已声明并且似乎有效）
另外，如果块是固定宽度，请查看此小提琴中的示例 #3（使用 calc）jsfiddle.net/Hastig/j2an4sgx

标签： javascript html css

【解决方案1】：

“left”的 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";

【讨论】：

【解决方案2】：

使用过渡：左0.5s线性；因为你还没有说你正在转换什么属性。

另外，把你想要改变的样式放在一个类中，然后用 js 应用这个类。

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

【讨论】：