Piotr Berebecki Piotr Berebecki - 29 days ago 6
Javascript Question

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

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

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);   
Comments