title: JavaScript - add transition between display:none and display:block
body: <p>I am using JavaScript to toggle notification like below.
  How can I add transition between <code>display: block</code> and <code>display: none;</code></p>
  
  <p><strong>I don't want to add an external library like jQuery because I am only going to be using the <code>toggle</code> effect alone.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var btn = document.querySelector('button');
  
  btn.addEventListener('click', function(){
    var hint = document.getElementById('hint');
    if(hint.style.display == 'none'){
      hint.style.display = 'block';
    }
    else{
      hint.style.display = 'none';
    }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#hint{
    background: gold;
    color: orangered;
    padding: .5em;
    font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='hint'&gt;
    
    &lt;p&gt;This is some hint on how to be safe in this community &lt;/p&gt;
     &lt;p&gt;This is another hint on how to be safe in this community &lt;/p&gt;
    &lt;/div&gt;
  
  &lt;button&gt; show hint &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know I can use jQuery to achieve this like below. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
  $('button').click(function(){
  $('#hint').toggle('slow');
  
  });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#hint{
        background: gold;
        color: orangered;
        padding: .5em;
        font-weight: bold;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id='hint'&gt;
        
        &lt;p&gt;This is some hint on how to be safe in this community &lt;/p&gt;
         &lt;p&gt;This is another hint on how to be safe in this community &lt;/p&gt;
        &lt;/div&gt;
  
      &lt;button&gt; show hint &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can I make the button moves up and down gradually while the <code>#hint</code> is being toggle like in the jQuery example above? I don't want the button to <strong>jump</strong> from one position to another.</p>