Transition not working when changing from display none to block

Question

I've noticed that transition is not working when the element is also changing from display none to block. Why is that? It works if I remove the display attribute.

CSS:

#box {
    width: 150px;
    height: 150px;
    background: red;
    transform: scale(0);
    display: none;
    transition: transform .5s;
}
    #box.active {
        transform: scale(1);
        display: block;
    }

http://jsfiddle.net/640kL55u/

Answer 1

Because it has display: none to begin with, the other styles are not being taken into the dom to be transitioned once display: block is added.

Instead, you can hide the div with height, so its still on the page but not showing. Then add the height on the show div.

JS Fiddle

Answer 2

Any change from or to display: none won't trigger transitions.

You can, however, change the display property and then add the class name at the end of the javascript stack. For instance:

function showElem(elem) {
  elem.style.display = "block";

  setTimeout(function() {
    elem.classList.add("active");
  }, 0);
}

And then pass element nodes to this function.

Answer 3

You can't transition with display: none; properties...

$("button").on("click", function() {

  $("#box").addClass("active");

});

#box {
  width: 0;
  height: 0;
  overflow: hidden;
  background: red;
  transform: scale(0);
  transition: transform .5s;
}
#box.active {
  width: 150px;
  height: 150px;
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="box"></div>
<button>CLICK</button>