Usando estas líneas, traté de agregar transiciones al elemento:
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);Pero establece la transición de esta manera:
element.style { transform: translateY(0px); transition: opacity 0.9s ease-in-out 0s; opacity: 1; }¡Los 0 adicionales están incluidos y arruinan la transición! ¿Cómo puedo arreglar esto?
Solo quiero agregar una transición de opacidad simple ;(
Un par de cosas:
Para establecer la propiedad de estilo con su nombre css, use style.setProperty(property, value) . Para configurarlo directamente con javascript, las propiedades tienen diferentes nombres, como backgroundColor en lugar de background-color .
¿Por qué usas un tiempo de espera? Puede establecer directamente la opacidad y la transición. No habrá problemas de tiempo.
Utilice transition en lugar de -webkit-transition . Es compatible con todos los navegadores. Y se puede configurar directamente en la propiedad de estilo.