title: Change of opacity using css transition and vanilla JavaScript works only when fading out
body: <p>This codepen shows my problem: <a href="http://codepen.io/PiotrBerebecki/pen/pNvpdG" rel="noreferrer">http://codepen.io/PiotrBerebecki/pen/pNvpdG</a></p>
  
  <p>When the user clicks on the big button the css <code>opacity</code> is reduced to 0. Since I've applied the following rule: <code>transition: opacity 0.5s ease-in-out;</code> the fade out animation is smooth.</p>
  
  <p>I would like to achieve the same smooth transition when the next button fades in.
  However for some reason the next button appears suddenly without any transition.</p>
  
  <p>Would you know what causes the issue and how to fix it?</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>console.clear();
  
  (function() {
    
    // Data for the app
    const model = {
      buttons: ['tomato', 'blue'],
      currentButton: -1
    };
    
    // Logic for the app
    const controller = {
      init: function() {
        view.init();
      },
      getButtonName: function() {
        model.currentButton = (model.currentButton + 1) % model.buttons.length;
        return model.buttons[model.currentButton];
      }
    };
    
    // View for the app
    const view = {
      init: function() {
        this.root = document.getElementById('root');
        this.showNext();
      },
      
      animationDelay: 500,
      
      showNext: function() {
        // Get next button name
        const buttonName = controller.getButtonName();
        
        // Create button DOM element
        const buttonElement = document.createElement('div');
        buttonElement.className = 'button';
        buttonElement.id = buttonName;
        buttonElement.textContent = buttonName;
        buttonElement.style.opacity = 0;
        
        // Add event listender for the button
        buttonElement.addEventListener('click', event =&gt; {
          // Reduce opacity
          buttonElement.style.opacity = 0;
          // Remove the button from DOM
          setTimeout(() =&gt; {
            this.root.removeChild(buttonElement);
          }, this.animationDelay + 10);
          // Start the function to show next button
          setTimeout(() =&gt; {
            this.showNext();
          }, this.animationDelay + 20);
        });
        
        // Add button to DOM
        this.root.appendChild(buttonElement);
        
        // Show button by increasing opacity
        buttonElement.style.opacity = 1;
        
      }
    };
    
    // Start the app
    controller.init();
  
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#tomato {
    background: tomato;
  }
  
  #blue {
    background: DeepSkyBlue;
  }
  
  .button {
    transition: opacity 0.5s ease-in-out;
    width: 100%;
    height: 50vh;
    border: solid 3px black;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>