从显示 none 更改为块时转换不起作用

Question

我注意到当元素也从 display none 更改为 block 时，transition 不起作用。这是为什么？如果我删除 display 属性，它会起作用。

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

您无法使用 display: none; 属性进行转换...

$("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>

Answer 2

因为它以 display: none 开始，所以一旦添加 display: block，其他样式将不会被纳入要转换的 dom。

相反，您可以隐藏带有高度的 div，这样它仍然在页面上但不显示。然后在showdiv.

上加上高度

JS Fiddle

Answer 3

从 display: none 到 display: none 的任何更改都不会触发转换。

但是，您可以更改 display 属性，然后在 javascript 堆栈的末尾添加 class 名称。例如：

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

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

然后将元素节点传递给这个函数。

从显示 none 更改为块时转换不起作用

Transition not working when changing from display none to block

css

transition