title: hide/show element with add/removeClass with CSS transition
body: <p>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.</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>-</p>
  
  <pre><code>$('#btn').on('click', function(){
     $('#test').toggleClass('active');
  });
  </code></pre>
  
  <p>-</p>
  
  <pre><code>&lt;div id="test" class="hidden"&gt;Hallo!&lt;/div&gt;
  &lt;input type="button" id="btn" value="show/hide"&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/y4ydfc2o/1/" rel="noreferrer">jsfiddle</a></p>
  
  <p>How could I do it? thank you</p>