Soy bastante nuevo en JS y estoy tratando de hacer una animación de diapositiva de texto simple. Sin embargo, cuando el evento de animación se activa por primera vez, la propiedad de transición no se aplica. Cada vez después de eso funciona bien.
Así que estoy luchando con la primera ejecución de la animación de diapositivas.
Aquí está el código:
function slide_animation(direction){ // Init let text = document.querySelector(".story .box .right-part .text"); let text_html = text.innerHTML; let text_slide = [ "Text n°1", 'Text n°2', 'Text n°3' ]; let current_slide = 0; // Looking for the current_slide for(let i=0;i<text_slide.length;i++){ if (text_slide[i]==text_html){current_slide = i}; } // Calculating the next slide position if (direction=='right'){ if (current_slide >= text_slide.length-1){ current_slide = 0; } else {current_slide+=1;} } else { if (current_slide <= 0){ current_slide = text_slide.length-1; } else { current_slide = current_slide-=1; } } // Animation setTimeout(()=>{ text.style.transition = '0.5s'; text.style.opacity = 0; text.style.left = '100px'; },250); setTimeout(()=>{ text.innerHTML = text_slide[current_slide]; text.style.opacity = 1; text.style.left = '0px'; },750) } .story .box .right-part .text-container .text { line-height: 1.25; position: relative; } <div class="box"> <div class="left-part"> <div class="text-container"> <p class="text"> <span class="text-padding fontsize-md">----</span> </p> </div> <div class="buttons-container"> <button class="backward" onclick="slide_animation('left')"></button> <button class="forward" onclick="slide_animation('right')"></button> </div> </div> <div class="right-part"> <div class="text-container"> <p class="text fontsize-sm">Text n°1</p> </div> </div> </div>De todos modos, está arreglado. Agregué otro setTimeOut que no hizo nada realmente útil en el texto, lo coloqué justo antes de los otros setTimeOut y parece funcionar correctamente.
Esto es lo que se inserta:
setTimeout(()=>{ text.style.left=0; },0)