reactjs 材质UI折叠动画不工作

4nkexdtk 于 2023-01-08 发布在 React

关注(0)|答案(1)|浏览(101)

我正在构建一个带有材质UI的 accordion ，我注意到当我把 accordion 直接放在文件的返回中时，它工作正常。但是如果我创建一个子组件并返回它，动画就不工作了。注意打开 accordion 是正常的，但是它突然弹开了，而不是平滑的过渡。你知道是什么导致了这个问题吗？
Replicated here
沙盒中的依赖关系反映了我的package.json中的版本。

reactjs

来源：https://stackoverflow.com/questions/75045039/material-ui-accordion-animation-not-working

1条答案

按热度按时间

sulc1iza1#

您正在App组件的 * 内部 * 定义QuestionAccordion组件，因此重新呈现将在 accordion 动画完成之前发生。在App组件的 * 外部 * 定义QuestionAccordion组件，它应该正常工作。例如：

const QuestionAccordion = ({
  dueAccordionOpen,
  handleAccordionChange,
  questionsMap
}: {
  dueAccordionOpen: boolean;
  handleAccordionChange: (val: QuestionTypes) => void;
  questionsMap: any;
}) => { ... }

export const App = () => { ... }

工作代码沙盒：https://codesandbox.io/s/material-ui-animation-problem-forked-msohg6?file=/src/App.tsx:995-1021

赞(0）回复(0）举报 2023-01-08