如何将 animation 添加到 React 中的可折叠组件？

Question

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/

Answer 1

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>

When click at icon, an --expanded will be added to clasName so now with sass we can do something like this:

 .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