title: Add smooth transition when changing an element's display using JavaScript
body: <p>I've added a search bar in the header that is set to <code>display: none</code> by default and I used js to make it appear on a button click via assigning a <code>.show</code> class which contains <code>display: block !important</code> to the search bar element (<code>#search</code>). It's working fine but my only problem is the rough transition from <code>display: none</code> to <code>block</code>, so I've been looking into ways to make this transition smooth and most of the answers I found were using jQuery, which I don't really want to do since I'm still in the learning phase of js, so if there's a way I can do this using vanilla js, please help me with it.</p>
  <p>Here's my code <a href="https://jsfiddle.net/5jxLq9ck/" rel="nofollow noreferrer">https://jsfiddle.net/5jxLq9ck/</a></p>
  <p>In CSS line 38, I add the <code>.show</code> utility class</p>
  <pre><code>.show {
      display: block !important;
  }
  </code></pre>
  <p>And I'm assuming I'll have to edit something in here (js) to get the desired effect:</p>
  <pre><code>function showSearch(e) {
      e.preventDefault;
      if (
          e.target.classList.contains(&quot;show-btn&quot;) ||
          e.target.classList.contains(&quot;fas&quot;)
      ) {
          const searchBar = document.querySelector(&quot;#search&quot;);
          searchBar.classList.add(&quot;show&quot;);
      }
  }
  </code></pre>
  <p>Additional question: is my use of <code>e.preventDefault</code> correct here? The functionality didn't work until I used it.</p>
  <p>Thanks a lot in advance.</p>