Transition not working when changing from display none to block

问题

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/

回答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

回答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.

回答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>

来源：https://stackoverflow.com/questions/32481972/transition-not-working-when-changing-from-display-none-to-block

标签

css

transition