Estoy usando transiciones css y un poco de javascript para hacer que los elementos se deslicen hacia la página desde la izquierda o la derecha.
Funciona perfectamente bien desde el lado derecho (a partir de transform: translateX(100vw); ). Pero desde el lado izquierdo (valor de traducción negativo: transform: translateX(-100vw); ) no funciona en absoluto. No hay ningún error, pero el elemento aparece al final de la transición sin ningún movimiento "animado".
Usar un valor px en lugar de vw para el lado negativo/izquierdo también funciona bien. Encontré varios ejemplos en los que las personas usaban valores vw negativos y no parecían tener problemas con eso...
También probé transform: translateX(calc(0px - 100vw)); . Sin suerte...
(No estoy usando ninguna biblioteca, etc.)
<!-- HTML --> <div class="container"> <div class="slide-in l"></div> <div class="slide-in r"></div> </div> /* CSS */ .slide-in { transition: transform 0.8s ease; } .slide-in.l { transform: translateX(-100vw); /* this is the line does not work */ } .slide-in.r { transform: translateX(100vw); } .slide-in.show { transform: translateX(0); } /* JavaScript */ const slider = document.querySelectorAll('.slide-in'); window.addEventListener("load", () => { slider.forEach(s => { s.classList.add('show'); }) });¿Alguna idea de cuál podría ser el problema?
El translateX(-100vw); debería funcionar bien
Cuando ejecute este fragmento, debería ver ambos rectángulos deslizándose a la vista, el verde desde la izquierda y el derecho desde la derecha.
const slider = document.querySelectorAll('.slide-in'); window.addEventListener("load", () => { slider.forEach(s => { s.classList.add('show'); }) }); /* CSS */ .slide-in { transition: transform 0.8s ease; width: 100px; height: 100px; } .slide-in.l { transform: translateX(-100vw); /* this is the line does not work */ background-color: green; } .slide-in.r { transform: translateX(100vw); background-color: blue; } .slide-in.show { transform: translateX(0); } <!-- HTML --> <div class="container"> <div class="slide-in l">a</div> <div class="slide-in r">b</div> </div>