如何为 React 中的可折叠组件添加动画？答案

【问题标题】：How to add animation to a collapsible component in React?如何为 React 中的可折叠组件添加动画？
【发布时间】：2021-11-25 23:36:48
【问题描述】：

我的 index.js 文件中有一个可折叠的组件，它可以正常工作。问题是我无法使其动画化，以便它像下面链接的这些示例中那样顺利折叠。这是我的 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;

非常感谢您提供可能的帮助。例子： https://react-bootstrap.github.io/utilities/transitions/

【问题讨论】：

标签： javascript reactjs components styled-components

【解决方案1】：

您可以使用带有过渡属性的 css 或 sass 来实现该效果。

例如有这个组件：

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>

单击图标时，将在 className 中添加 --expanded 所以现在有了 sass，我们可以做这样的事情：

.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%;
        }
    }
}

如果你对代码有点困惑，试着玩一下宽度和高度，以及过渡属性

【讨论】：