Transition only working on debug

Question

The following code only works when I debug through it:

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>

I tried it without input.focus(); but that doesn't make a difference. When my debugger is at this point input.style.boxShadow = "0px 0px 5px #ff0000"; I can continue and it works. Why isn't my input field red outlined when I run this code? JSFiddle.

Without perhaps the console output, it's hard to say. I'll look at JSFiddle and see if there is anything specific missing, as you only gave me a block of code. — 4g0tt3nSou1, Feb 17 '17 at 15:50

score 2 · Accepted Answer · edited May 23 '17 at 12:17

I think it's because you set 2 transitions synchronously one after another, the browser optimizes it and renders they in the one frame. You could set a small duration (for example, 1ms) to the first transition and use transitionend event:

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

Also could use the old hack with setTimeout(fn, 0) to make it works:

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

score 0 · Answer 2 · answered Feb 17 '17 at 15:56

You add an additional line to set a 0px black box-shadow, and yet you expect a red shadow..

Take a look at the updated 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>

I want to fade the red border away. – wa4_tasty_elephant Feb 17 '17 at 15:58 — wa4_tasty_elephant, Feb 17 '17 at 15:58

Transition only working on debug

2 Answers2