Using this lines I tried to add transitions to the element:
transition.style.transform = 'translateY(0)';
transition.style['-webkit-transition'] = 'opacity 0.9s ease-in-out';
setTimeout(() => {
type == 'showContainer' ? transition.style.opacity = 1 :
transition.style.opacity = 0;
}, 100);
But it sets the transition like this:
element.style {
transform: translateY(0px);
transition: opacity 0.9s ease-in-out 0s;
opacity: 1;
}
The extra 0s is included and ruins the transition!!! How can I fix this?
I just want to add a simple opacity transition ;(
Couple of things:
To set the style property with it's css name, use style.setProperty(property, value). To set it directly with javascript, the properties have different names, such as backgroundColor as opposed to background-color.
Why do you use a timeout? You can directly set the opacity and the transition. There will be no timing issues.
Use transition instead of -webkit-transition. It is compatible with every browser. And can be directly set on style property.