Переход работает только на отладку

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 перехода синхронно один за другим, браузер оптимизирует его и отображает в одном кадре. Вы можете установить небольшую продолжительность (например, 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

Answer 2

Вы добавить дополнительную строку, чтобы задать 0px черный 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>