CSS 过渡问题

Question

我有 2 个问题（我是新手，所以请多多包涵）。问题与此相关 jsfiddle.

在下面的示例 url 中，为什么我的转换在 chrome 上根本不起作用。我认为 webkit 是 chrome!
是否有更简单的方法来覆盖转换？我目前正在专门添加一个 mouseDown，这样我就可以取消过渡，但感觉很笨拙。

Answer 1

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

这是正确的方法:)

testDiv.style.setProperty("-webkit-transition", "top .3s linear");

testDiv.style.top = "100px";


theBtn.addEventListener('mouseup', function(e) {
  btnUpFunc();
}, false)

theBtn.addEventListener('mousedown', function(e) {
  btnDownFunc();
}, false)


function btnDownFunc() {
  testDiv.style.setProperty("-webkit-transition", "none");
  testDiv.style.top = "50px";
}

function btnUpFunc() {
  testDiv.style.setProperty("-webkit-transition", "top .3s linear");
  testDiv.style.top = "100px";
}

#testDiv {
  position: absolute;
  background-color: rgba(255, 0, 0, .5);
  width: 125px;
  height: 40px;
  -webkit-transition: top 0.4s ease-in-out 0;
}
#theBtn {
  left: 150px;
}

<div id="testDiv">Hello World</div>
<button id="theBtn" type="button">Click Me!</button>

Answer 2

transition属性现在已经被所有主流浏览器完全支持一段时间了，所以不再需要-webkit-(http://caniuse.com/#search=transition)

针对您的问题，只需更改

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

到

transition: top 0.4s ease-in-out;

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

Answer 3

如果删除以下行

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

并去掉延迟值（或改成0s），即可正常使用

http://jsfiddle.net/hpm6wzuh/5/

CSS 过渡问题

CSS Transition Questions

css

google-chrome

transitions