1

我在 javascript 中编写了代码(显示/隐藏 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;
}
4

1 回答 1

1

我看到两个主要问题:

  1. 您无法转换该display属性。您必须从一开始就将其作为一个块,然后将其隐藏opacity: 0

  2. 您需要使用-webkit供应商前缀才能使其在 Chrome 和 Safari 中运行。

在此处查看工作演示:http: //codepen.io/anon/pen/hwayD

于 2013-02-05T18:12:29.463 回答