CSS过渡问题

我有两个问题（我是新手，所以请温柔一点）。这些问题与此相关

在下面的示例url上，为什么我的转换在chrome上根本不起作用。我以为webkit是chrome所需要的

是否有更简单的方法覆盖转换？我现在特别添加了一个mouseDown，这样我就可以取消转换，但是感觉很笨重

---

试试这个。JavaScript中的转换语法是错误的

这是正确的方法：）

testDiv.style.top=“100px”；
BTN.addEventListener（'mouseup'，函数（e）{
btnUpFunc（）；
}，错）
BTN.addEventListener（'mousedown'，函数（e）{
btnDownFunc（）；
}，错）
函数btnDownFunc（）{
testDiv.style.setProperty（“-webkit transition”，“none”）；
testDiv.style.top=“50px”；
}
函数btnUpFunc（）{
testDiv.style.setProperty（“-webkit transition”，“top.3s linear”）；
testDiv.style.top=“100px”；
}

#testDiv{
位置：绝对位置；
背景色：rgba（255,0,0,5）；
宽度：125px；
高度：40px；
-webkit过渡：前0.4s易入易出0；
}
#theBtn{
左：150px；
}

你好，世界
点击我

所有主流浏览器暂时都完全支持

transition

属性，因此不再需要-webkit（）

对于您的问题，只需更改

transition: top 0.4s ease-in-out 0;

到

---

我知道这看起来很奇怪，但由于无法识别0的延迟，浏览器假定0是一个新的持续时间，并覆盖之前设置的0.4s持续时间，从而导致0转换。

如果删除以下行

testDiv.style.webkitTransition = "none";
testDiv.style.webkitTransition = "top 0.4s ease-in-out 0";

并删除延迟值（或将其更改为

0s

），然后正常工作

---

谢谢，这肯定更有意义。然而，为什么它不能像在firefox中一样在chrome中进行初始向下滑动呢。在FF中，页面加载的第二秒，div向下滑动，因为我必须在CSS中转换，并且我在JS中立即调整该div的顶部。适用于FF，但不适用于Chrome:-\非常好，非常感谢！我有很多东西要学。很高兴使用transition，我的主代码中包含了所有的-moz-o-ms元素，非常难看。我想我得养成查狗的习惯了！

transition: top 0.4s ease-in-out;

testDiv.style.webkitTransition = "none";
testDiv.style.webkitTransition = "top 0.4s ease-in-out 0";