Question

以下代码仅在我通过它进行调试时才有效：

function testFunction()
{
  var input = document.getElementById("testInput");
  var button = document.getElementById("testButton");
  
  input.style.transition = "box-shadow 0s";
  input.style.boxShadow = "0px 0px 5px #ff0000";
  input.style.transition = "box-shadow 5s";
  input.style.boxShadow = "0px 0px 0px #000000";
  //input.focus();
}

<input id="testInput"/>
<button id="testButton" onclick="testFunction();">Press me!</button>

我在没有input.focus();的情况下尝试过，但这并没有什么区别。当我的调试器在此时input.style.boxShadow = "0px 0px 5px #ff0000";我可以继续并且它可以工作。运行此代码时，为什么我的输入字段不是红色的？ JSFiddle

Answer 1

我认为这是因为你一个接一个地同步设置2个转换，浏览器优化它并在一帧中呈现它们。您可以将较短的持续时间（例如HTTPAuthRealm）设置为第一次转换并使用transitionend事件：

＆＃13;

IResource

＆＃13;

1ms

＆＃13;

JSFiddle

也可以使用setTimeout(fn, 0)的旧hack来使其正常工作：

＆＃13;

function testFunction() {
    var input = document.getElementById("testInput");
    var button = document.getElementById("testButton");

    input.style.transition = "box-shadow 1ms";
    input.addEventListener('transitionend', function() {
        input.style.transition = "box-shadow 5s";
        input.style.boxShadow = "0px 0px 0px #000000";
    }, false);
    input.style.boxShadow = "0px 0px 5px #ff0000";
    //input.focus();
}

＆＃13;

<input id="testInput"/>
<button id="testButton" onclick="testFunction();">Press me!</button>

＆＃13;

JSFiddle

Answer 2

您添加了一条额外的行来设置0px黑色box-shadow，但是您希望有一个红色阴影..

查看更新的jsfiddle：https://jsfiddle.net/wqt4dehg/4/

function testFunction()
{
	var input = document.getElementById("testInput");
  var button = document.getElementById("testButton");
  
  input.style.transition = "box-shadow 0s";
  input.style.boxShadow = "0px 0px 5px #ff0000";
  input.style.transition = "box-shadow 5s";
  //input.style.boxShadow = "0px 0px 0px #000000";
  //input.focus();
}

<input id="testInput"/>
<button id="testButton" onclick="testFunction();">Press me!</button>

转换仅适用于调试

2 个答案: