Actualmente estoy mejorando un clic para abrir la barra de navegación en una barra flotante para un proyecto. onMousteEnter y onMouseLeave funcionan bien, la barra de navegación se abre y se cierra al pasar el mouse por encima. Sin embargo, mi problema es que no puedo agregarle una transición en CSS. No estoy seguro de cuál podría ser el problema.
Mi componente de la barra lateral:
export const Sidebar = props => { const { open, modules } = props; const onMouseEnter = useCallback(() => props.setMainMenuOpen(!open), []); const onMouseLeave = useCallback(() => props.setMainMenuOpen(open), []); return ( <div open={setMainMenuOpen} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} className={`navigation ${open ? 'open' : ''}`} data-test-id="navigation" tabIndex="-1" > {modules.map(module => ( <SidebarItem key={module.id} module={module} /> ))} </div> ); }; .navigation { padding-top: 10px; margin-bottom: 0; margin-left: 0; background: $color-sidebar-navigation-background; text-align: center; display: flex; flex-direction: column; position: relative; z-index: 1303; &.open { z-index: 1303; height: 100%; width: 6 * $navigation--width; box-shadow: 0 3px 14px 2px rgba(36, 36, 36, 0.12), 0 8px 10px 1px rgba(36, 36, 36, 0.14), 0 5px 5px -3px rgba(36, 36, 36, 0.2); }(todo funciona aparte de la transición)
Estoy tratando de agregar la transición al className de navegación, pero no funciona. Intenté agregar a &.open{} también pero aún nada...
Lo que estoy tratando de lograr es que la barra de navegación tenga una transición abierta y cerrada para una experiencia de usuario más fluida.
Creo que necesita agregar visibilidad: 1 cuando está abierto y visibilidad: 0, de lo contrario. En ese caso, su propiedad de transición se aplicaría a la visibilidad del elemento.
Si está intentando agregar una transición al ancho de su elemento, debe establecer el ancho inicial del elemento, así como el ancho al que debe cambiar. En general, para una transición, debe especificar el valor de la propiedad que está transicionando. En su caso, agregar un valor de ancho a .navigation debería hacer que la transición funcione. Espero que esto haya ayudado.