Question

我注意到，当元素也从transition display更改为none时，block无效。这是为什么？如果我删除了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开头，所以在添加display: block后，其他样式不会被转换为要转换的dom。

相反，您可以使用高度隐藏div，因此它仍然在页面上但不显示。然后在show div。

上添加高度

JS Fiddle

Answer 2

您无法使用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 3

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

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

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

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

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

从display none更改为block时，转换不起作用

3 个答案: