CODEWITHSUNDEEP
javascriptcsscss-transitionstransition
wa4_tasty_elephant
wa4_tasty_elephant

Reputation: 157

Transition only working on debug

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.

Upvotes: 1

Views: 733

Answers (2)

sergdenisov
sergdenisov

Reputation: 8572

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

Upvotes: 2

pol
pol

Reputation: 2701

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>

Upvotes: 0

Related Questions