Question

I wrote code in the javascript (show/hide div). Now i wanna use attribute “transition” in CSS, but it doesn’t work.

JavaScript in HEAD:

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

Div add-contact and 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>

Part CSS:

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

Answer 1

I see two major problems:

1. You can’t transition the display property. You have to have it as a block from start, and just hide it with opacity: 0

2. You need to use the -webkit vendor prefix to make it work in Chrome and Safari.

See a working demo here: http://codepen.io/anon/pen/hwayD