Tengo un componente plegable en mi archivo index.js que es funcional. El problema es que no puedo animarlo para que colapse sin problemas como en estos ejemplos del enlace a continuación. Este es mi archivo index.js:
import { FaArrowDown } from "react-icons/fa"; import { CollapsibleContainer, ArrowContainer } from "./CollapsibleElements"; const Collapsible = (props) => { const [isOpen, setIsOpen] = useState(false); return ( <CollapsibleContainer> <div className="collapsible"> <ArrowContainer> <FaArrowDown onClick={() => setIsOpen(!isOpen)} style={{fontSize: '1.5rem', marginBottom: 15}} /> </ArrowContainer> {isOpen && ( <div className={isOpen ? "content show" : "content"}> <p>Content inside here</p> </div> )} </div> </CollapsibleContainer> ); }; export default Collapsible;La posible ayuda sería muy apreciada. Ejemplos: https://react-bootstrap.github.io/utilities/transitions/
Puede lograr ese efecto usando css o sass con la propiedad de transición.
por ejemplo, tener este componente:
export const SidebarOptions = ({ isExpanded = false, iconSize = '16px', color = 'gray', children }) => { const [expanded, setExpanded] = useState(isExpanded); const iconStyles = { fontSize: iconSize, color }; const expandedClassName = expanded ? '--expanded' : '' const iconDirection = expanded ? <DoubleRightOutlined style={iconStyles} /> : <DoubleLeftOutlined style={iconStyles} />; return ( <div className={`sidebar-options${expandedClassName}`}> <div className="icon" onClick={() => setExpanded(!expanded)}> {iconDirection} </div> <div className={`sidebar-options__content${expandedClassName}`}> {expanded && children} </div> </div > ) } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> .sidebar-options { width: 60px; height: 100%; transition: width 0.3s ease-in; display: flex; flex-direction: column; align-items: center; border-left: 1px solid var(--dark-border); background-color: $background-light-2; &--expanded { width: 35%; display: flex; flex-direction: column; align-items: center; transition: width 0.3s ease-out; background-color: $background-light-2; border-left: 1px solid var(--dark-border); } &__content { width: 100%; visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.5s linear; &--expanded { visibility: visible; opacity: 1; transition: visibility 0.5s, opacity 0.5s linear; padding: $spacing-l; width: 100%; } } }si se confunde un poco con el código, intente jugar con el ancho y el alto, y la propiedad de transición