hide/show element with add/removeClass with CSS transition

Question

I'd like to hide/show an element with addClass and removeClass function animation with CSS transition. I tried in this way but when I addClass "active" display not shown.

.hidden {
  display: none;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

.active {
  transition: display .5s ease;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

#test {
  width: 100px;
  height: 40px;
  background: red;
}

-

$('#btn').on('click', function(){
   $('#test').toggleClass('active');
});

-

<div id="test" class="hidden">Hallo!</div>
<input type="button" id="btn" value="show/hide">

jsfiddle

How could I do it? thank you

Answer 1

I think this is better to solve it with jquery, not css transition. If you just want to show and hide an element, simply you can use jquery fadeIn and fadeOut without any css rule.

$('#btn').on('click', function(){
   $('#test').fadeToggle("slow");
});

Here is the updated fiddle.

For more information about fadeToggle, refer to this link.

Answer 2

You need to add some css code into your .active class, put this into css section, here is the updated fiddle :

display : block;

Answer 3

You will have to remove the existing class hidden from the div, since hidden has display none which stops it from displaying.
Add this in the JQuery inside onclick of the Button.

 $('#test').removeClass('hidden');