Estoy intentando aprender y practicar transiciones CSS, pero no sé por qué no puedo hacer que funcione esta transición div class=text.
const menuToggle = document.querySelector('.toggle')
const showCase = document.querySelector('.showcase')
const text = document.querySelector('.text')
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active')
showCase.classList.toggle('active')
text.classList.toggle('active')
})
.text {
position: absolute;
z-index: 6;
transition-duration: 0.9s;
transition-timing-function: ease;
}
.text.active {
left: 950px;
}
<div class="text">
<h2>This</h2>
<h3>Transition</h3>
<p>
Lorem
</p>
<a href="">Hover</a>
</div>
Aquí está el codepen, así que mira la imagen completa.
https://codepen.io/Code_Blues/pen/vYgGeXQ
Estoy intentando hacer la transición del div class=text hacia la derecha cuando se hace clic en el menú para alternar, pero no parece funcionar.
¿Alguien puede ayudarme y decirme qué parece que estoy haciendo mal? Estaría realmente agradecido.
Muchas gracias.
"Error de tipo: hombresuToggle es nulo" por favor corrija su código de fragmento.
-connexo
27 de marzo de 2021 a las 2:09
------------------------------------
Una posible solución para usted es utilizar transformar: funciones de traducción.
Por ejemplo, prueba algo así en lugar de la clase .text.active actual.
.texto.activo{
transformar: traducirX (400px)
}
3
¡Funcionó muy bien! gracias, voySupongo que también voy a practicar y aprender más sobre la transformación de ahora en adelante. Pero, ¿conoce las probables razones por las que el uso de la transición no funcionó esta vez? ¡Nuevamente gracias!
-CodeBlues
27 de marzo de 2021 a las 0:42
En su caso, no funcionó porque no le quedaba ninguna propiedad en la clase principal .text. Por lo tanto, la transición de ninguno a 950 px no funciona. Puedes usar la clase de transformación que escribí o simplemente definir un valor inicial para la propiedad izquierda en la clase de texto.
-Vinicius Silveira Alves
27 de marzo de 2021 a las 0:51
Sí, ahora sé dónde me equivoqué. Te agradezco que te hayas tomado el tiempo de explicármelo.
-CodeBlues
27 de marzo de 2021 a las 1:19
------------------------------------
Puedes definir diferentes valoreses para propiedades de transición como la altura.
.text{
position: absolute;
z-index: 6;
height: 300px;
transition-duration: 2s;
transition-timing-function: ease;
}
.text.active{
height: 10px;
left:950px;
}
1
Sí, gracias, ahora sé mi error al no poner la transición de propiedad inicial. Realmente te agradezco que te hayas tomado el tiempo para responder.
-CodeBlues
27 de marzo de 2021 a las 1:22
------------------------------------
Simplemente agregue a la izquierda: 100píxeles; textear.
. . .
.text {
position: absolute;
z-index: 6;
transition-duration: 0.9s;
transition-timing-function: ease;
left: 100px;
}
.text.active {
left: 950px;
}
. . .
👉 Compruébalo en acción en codepen
Debes proporcionarle a .text una posición inicial. Ahora si sumarás left: 0; comenzará desde el inicio completo de la ventana.
Y en general, ha agregado un relleno de 100 píxeles a la sección .showcase. Entonces agregaremos add left: 100px; para alinear el texto con otros elementos.
Con izquierda: 0;:
Con izquierda: 100px;:
2
Sí, ¡gracias, funcionó! ¿Cuál fue la razón por la que tuve que agregar left:100px a .text? , supongo que yo¿Tiene algo que ver con la posición del div?
-CodeBlues
27 de marzo de 2021 a las 0:38
@CodeBlues Agregué una explicación. Si no entendiste nada puedes decírmelo. Eran las 04:30 de la mañana... Y tenía sueño así que no agregué una explicación 🙄😅
- Manas Khandelwal
27 de marzo de 2021 a las 9:39
