title: fade-out of a showed div and fade-in of a hidden div on button click
body: <p>I have 2 div: &quot;secA&quot; is the one that is showed at first, &quot;secB&quot; is hidden. Both div have a button that onclick show the other div and hide itself.
  I want to make a fade-like transition from A to B and viceversa. A fade-in/fade-out transition it's ok, but if possible, a slide-left/slide-right animation would be better.</p>
  <p>Here the HTML code:</p>
  <pre><code>&lt;html&gt;
  
  &lt;body&gt;
  
    &lt;div class=div1 id=&quot;secA&quot;&gt;
      Section A&lt;br/&gt;
      &lt;button class=button1 onclick=&quot;myFunction()&quot;&gt;ToSectionB&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div hidden class=div2 id=&quot;secB&quot;&gt;
      Section B&lt;br/&gt;
      &lt;button class=button2 onclick=&quot;myFunction()&quot;&gt;ToSectionA&lt;/button&gt;
    &lt;/div&gt;
    
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Here the CSS code:</p>
  <pre><code>.div1 {
      background-color: red;
      color: white;
      height: 50px;
      width: 100px;
      top: 50%;
      left: 50%;
      position: absolute;
      text-align: center;    
  }
      
  .div2 {
      background-color: green;
      color: white;
      height: 50px;
      width: 100px;
      top: 50%;
      left: 50%;
      position: absolute;
      text-align: center;
  }
      
  .button1{
      border-radius: 50px;
      padding: 5px;
  }
      
  .button2{
      border-radius: 50px;
      padding: 5px;
  }
  </code></pre>
  <p>Here the JavaScript code:</p>
  <pre><code>function myFunction() {
          var x = document.getElementById(&quot;secA&quot;);
          var y = document.getElementById(&quot;secB&quot;);
          if (x.style.display === &quot;none&quot;) {
              y.style.display = &quot;none&quot;;
              x.style.display = &quot;block&quot;;
          }
          else {
              y.style.display = &quot;block&quot;;
              x.style.display = &quot;none&quot;;
          }
  }
  </code></pre>