1

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;
}
4

1 に答える 1

1

2 つの大きな問題があります。

  1. displayプロパティを移行することはできません。最初からブロックとして持つ必要があり、それを非表示にするだけですopacity: 0

  2. -webkitChrome と Safari で機能させるには、ベンダー プレフィックスを使用する必要があります。

ここで動作するデモを参照してください: http://codepen.io/anon/pen/hwayD

于 2013-02-05T18:12:29.463 に答える