轉換隻能在調試

工作時，我通過它調試下面的代碼只適用：轉換隻能在調試

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。

來源

2017-02-17 Wavum

沒有perha ps的控制檯輸出，很難說。我會看看JSFiddle，看看是否有任何特定的缺失，因爲你只給了我一段代碼。 – 4g0tt3nSou1

@ 4g0tt3nSou1控制檯不輸出任何東西。 – Wavum

我認爲這是因爲您一個接一個地同步設置2個轉換，瀏覽器優化它並將它們呈現在一個框架中。您可以設置一個小的時間（例如，1ms）的第一過渡和使用transitionend事件：

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(); 
 
}

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

JSFiddle

也可以使用舊的黑客與setTimeout(fn, 0)使它工作原理：

function testFunction() { 
 
    var input = document.getElementById("testInput"); 
 
    var button = document.getElementById("testButton"); 
 

 
    input.style.boxShadow = "0px 0px 5px #ff0000"; 
 
    setTimeout(function() { 
 
     input.style.transition = "box-shadow 5s"; 
 
     input.style.boxShadow = "0px 0px 0px #000000"; 
 
    }, 0); 
 
    //input.focus(); 
 
}

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

JSFiddle

來源

2017-02-17 15:56:22

您添加一個額外的行設置一個0像素黑色box-shadow，但你想到一個紅色的影子..

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

function testFunction() 
 
{ 
 
\t 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>

來源

2017-02-17 15:56:52 pol

我想淡出紅色邊框。 – Wavum

轉換隻能在調試

回答

相關問題