I have a collapsible component in my index.js file which is functional. The problem is that I am not able to make it animated so that it would collapse smoothly like in these examples of the link below. This is my index.js file:
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;
Possible help would be really appreciated. Examples: https://react-bootstrap.github.io/utilities/transitions/
You can achieve that effect using css or sass with transition property.
for example having this component:
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%;
}
}
}if you get a bit confuse with code, just try to play with width and height, and transition property