Bienvenido a la Comunidad de Treehouse
¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.
¿Buscas aprender algo nuevo?
Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de
Inicia tu prueba gratuita
Elias Paiva
7,348 Puntos¿Por qué se agregó la declaración "transition-duration: 1s;" a ".button" y no a ".button:hover"?
Pensé que se iba a agregar a la declaración hover, pero lo probé y funciona de ambas formas. Entonces, ¿por qué una sobre la otra?
2 Respuestas
Peter Vann
36,429 Puntos¡Hola Elias!
Creo que es solo la forma acostumbrada de abordarlo.
Piensa en button como el punto de partida y button:hover como el punto final
Mi forma de verlo es que incluyes la transición/duración en el punto de partida.
¿Tiene sentido?
POR CIERTO, lo probé también, y parece que FUNCIONA de ambas formas.
NOTA: Pero hay una diferencia sutil (que yo tampoco noté al principio):
Cuando transition-duration se asigna a button, la duración funciona TANTO cuando pasas el ratón por encima como cuando lo retiras.
Cuando se asigna a button:hover, sin embargo, obtienes una transición suave y lenta solo cuando pasas el ratón por encima.
Cuando retiras el ratón, vuelve abruptamente al estado anterior (sin la transición suave y lenta).
(Pruébalo de nuevo y lo verás.)
¡Entonces, ¡aprendí algo nuevo también!?! LOL (¡Gracias por eso!)
Más información:
https://www.w3schools.com/css/css3_transitions.asp
https://css-tricks.com/almanac/properties/t/transition/
Espero que eso ayude.
¡Manténgase seguro y feliz codificando!
Soleil Walker
Diseño UX Graduado de Techdegree 18,959 puntosPara agregar a la respuesta de Peter, le pregunté a ChatGPT sobre esto. En resumen, dice que se hace de esta manera para mantener tu código consistente, claro, eficiente y fácil de mantener.
Para ampliar esto, al definir la propiedad en la regla de estado original:
Consistente - Nos aseguramos de que la transición se comporte de manera consistente en los diversos pseudo-estados que un elemento podría tener estilizados. Por ejemplo, no solo cuando pasas el ratón por encima, sino también cuando lo retiras.
Claro - Estamos separando las declaraciones de comportamiento de las declaraciones de estilo. Las declaraciones de comportamiento predeterminadas se agregan a la regla de estado original y las declaraciones de estilo únicas se agregan a cada estado de pseudo-clase individual.
Eficiente - Estamos evitando que el navegador tenga que analizar el código y procesar esa regla predeterminada cada vez que el estado cambia.
Facilidad de mantenimiento - Estamos haciendo nuestro código más fácil de mantener al tenerlo en un lugar en lugar de varios lugares en caso de que necesitemos actualizarlo.