Question

我在javascript（show / hide div）中编写了代码。现在我想在CSS中使用属性“transition”，但它不起作用。

HEAD中的JavaScript：

function show()
{
  document.getElementById('add-contact').style.display=\"block\";
  document.getElementById('add-contact-button').style.display=\"none\";
}
</script>

Div add-contact和add-contact-button：

<span id=\"add-contact-button\" href=\"/kontakty#\" onclick=\"javascript:show()\">Dodaj kontakt</span>
  <form action=\"kontakty/dodaj\" method=\"post\" id=\"add-contact\" >
    ...
  </form>

部分CSS：

form#add-contact {
  float: right;
  width: 223px;
  height: auto;
  line-height: 27px;
  display: none;
  transition: height 500ms linear;
}

Answer 1

我看到两个主要问题：

您无法转换display属性。您必须从头开始将其作为一个块，并使用opacity: 0
您需要使用-webkit供应商前缀才能在Chrome和Safari中使用。

在此处查看有效的演示：http://codepen.io/anon/pen/hwayD

如何在show / hide中使用过渡

1 个答案: