Tengo una barra de navegación que, cuando se expande, cambia para usar el 50 % de la pantalla, dentro de este elemento de navegación expandido, hay un componente de campo de búsqueda. El problema al que me enfrento es que el campo de búsqueda aparece antes de que la barra de navegación termine de expandirse (lo cual sé que tiene sentido). Simplemente no puedo entender cómo arreglar eso. ¡Gracias por adelantado! Este es el código correspondiente:
JSX:
const NavMobile = () => { const [isExpanded, setIsExpanded] = useState(false); const expandNav = () => { document.getElementById("nav")?.classList.add("expanded"); setIsExpanded(true); }; const closeNav = () => { document.getElementById("nav")?.classList.remove("expanded"); setIsExpanded(false); }; return ( <div id="nav" className="navWrapper"> <nav className="container"> <button className="navButton" style={{ display: isExpanded ? "none" : undefined }} onClick={expandNav} > <i className="fa fa-search"></i> Search a service ... </button> {isExpanded ? ( <div className="expandedContainer"> <ServiceSearchFields /> </div> ) : null} </nav> </div> ); };SCSS:
.navWrapper { transition: 1000ms; box-shadow: 2px 4px 5px 0px rgba(0, 0, 0, 0.53); height: 70px; background-color: var(--mainColor); display: flex; margin: 0; } .expanded { height: 35vh !important; } .expandedContainer { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 15px; }Podría ser una buena idea usar el detector de eventos 'transitionend' adjunto a su contenedor. Muestra: https://stackblitz.com/edit/react-5k1ssu Consulte el siguiente ejemplo:
import React, { useState, useRef, useEffect } from 'react'; import './style.css'; const NavMobile = () => { const [isExpanded, setIsExpanded] = useState(false); const [isSearchVisible, setIsSearchVisible] = useState(false); const wrapper = useRef(null); const expandNav = () => { document.getElementById('nav')?.classList.add('expanded'); setIsExpanded(true); }; const closeNav = () => { document.getElementById('nav')?.classList.remove('expanded'); setIsExpanded(false); }; const showSearch = () => { setIsSearchVisible(true); }; useEffect(() => { if (!wrapper.current) return; wrapper.current.addEventListener('transitionend', showSearch); console.log(wrapper.current); return () => { wrapper.current.removeEventListener('transitionend', showSearch); }; }, []); return ( <div id="nav" ref={wrapper} className="navWrapper"> <nav className="container"> <button className="navButton" style={{ display: isExpanded ? 'none' : undefined }} onClick={expandNav} > <i className="fa fa-search"></i> Search a service ... </button> {isExpanded ? ( <div className="expandedContainer"> {isSearchVisible && <div>Search</div>} </div> ) : null} </nav> </div> ); }; export default function App() { return ( <div> <NavMobile /> </div> ); } .navWrapper { transition: 1000ms; box-shadow: 2px 4px 5px 0px rgba(0, 0, 0, 0.53); height: 70px; background-color: var(--mainColor); display: flex; margin: 0; } .expanded { height: 35vh !important; } .expandedContainer { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 15px; } <div id="root"></div>