Change of opacity using css transition and vanilla JavaScript works only when fading out

Question

This codepen shows my problem: http://codepen.io/PiotrBerebecki/pen/pNvpdG

When the user clicks on the big button the css opacity is reduced to 0. Since I've applied the following rule: transition: opacity 0.5s ease-in-out; the fade out animation is smooth.

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.

Would you know what causes the issue and how to fix it?

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 => {
        // Reduce opacity
        buttonElement.style.opacity = 0;
        // Remove the button from DOM
        setTimeout(() => {
          this.root.removeChild(buttonElement);
        }, this.animationDelay + 10);
        // Start the function to show next button
        setTimeout(() => {
          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();

}());

#tomato {
  background: tomato;
}

#blue {
  background: DeepSkyBlue;
}

.button {
  transition: opacity 0.5s ease-in-out;
  width: 100%;
  height: 50vh;
  border: solid 3px black;
  cursor: pointer;
}

<div id="root"></div>

Answer 1

This should work , Code pen link: http://codepen.io/saa93/pen/gLbvmQ

You would need to add this instead of directly setting opacity to 1

// Show button by increasing opacity
buttonElement.style.opacity = 0;
setTimeout(() => {
    buttonElement.style.opacity = 1;
}, this.animationDelay + 20);