CSS转换不'；当javascript添加连续属性时无法工作

下面是一个简化版本的问题，我与我的网站

函数移动（）{
document.getElementById（“box”）.style.transition=“0s”；
document.getElementById（“box”）.style.top=“100px”；
document.getElementById（“box”）.style.transition=“2s”；
document.getElementById（“box”）.style.top=“0px”；
}

#框{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
顶部：0px；
}

---

在分配新属性之前，代码似乎需要延迟，以使浏览器能够处理请求。因此，您需要使用

setTimeout（）

来解决此问题

函数移动（）{
document.getElementById（“box”）.style.transition=“0s”；
document.getElementById（“box”）.style.top=“100px”；
setTimeout（函数（）{
document.getElementById（“box”）.style.transition=“2s”；
document.getElementById（“box”）.style.top=“0px”；
}, 10);
}

#框{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
顶部：0px；
}

---

与其依赖于过渡，不如使用

@关键帧

和

动画

，这样就不必使用肮脏的技巧，如在动画中间将过渡持续时间从0更改为实际值来实现跳跃。下面是一个利用

@关键帧

css功能的示例：

函数移动（）{
document.getElementById（“box”）.style.animation=“movement 2s”；
}

#框{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
顶部：0px；
}
@关键帧移动{
从{top:100px；}
到{top:0px；}
}

---

我想我明白了。唯一让我困惑的是为什么10毫秒？为什么不使用1ms？@JonathonPhilipChambers如果有效，你可以使用1ms。我用了10毫秒来确保代码正常工作。这个解决方案运行良好。我把它从10毫秒改为1毫秒，现在还没有任何东西坏掉。（我看不出有什么不同。1ms对我来说就像是更干净的代码。）我很好奇，但为什么它只在第一次点击时有效？另外，如果开始和/或完成位置由javascript确定，它会有效吗？它只在第一次点击时有效，因为一旦添加了类，然后重新添加它不会改变应用的css规则，因此，如果没有任何变化，则不会发生动画。因此，要使用多次单击，需要在动画完成后删除该类。要更改javascript中的位置，可以使用css变量。这两个问题的解决方案可在此代码笔中找到：