reactjs - 在过渡/动画之后显示/隐藏 React 组件

Question

我有一个需要显示/隐藏的 React 组件。我通常了解如何做到这一点，但是，在我的情况下，应该在显示/隐藏操作之前出现一个增长/收缩动画。在不添加额外包（如 React Spring）的情况下，最好的（最简单的？）方法是什么？

显示/折叠过渡效果很好，我只是希望在return nullcollapse=true 过渡完成之后的结果，当然，当 collapse=false 时相反

========== MyClass.scss ==========

@use 'utils/animation';

.my-class {
  transition: height animation.duration(500ms) animation.$default-timing-function;
  flex-shrink: 0;
  height: 9rem;
  overflow: hidden;

  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.my-class-collapsed {
  height: 0;
}

========== MyClass.tsx ==========

export const myClass = ({
  items,
  collapsed = false,

  className,
  style,

  ...tcProps
}: MyProps) => {

  return (
    <div
      id="Container"
      className={cx(cn.myClass, collapsed && cn.myClassCollapsed, className)}
      style={{ ...tokens, ...style }}
      role="presentation"
    >
    <ClassChildren {...tcProps} style={{ width: '100%' }}>
      {supplyChildren()}
    </ClassChildren>
    </div>
  );
};

标签： reactjsreact-hooks