React如何使用平滑渲染打开子组件

Question

我正在尝试复制子组件onClick的平滑渲染，但我被卡住了，不确定该使用什么

我想要实现的目标示例

切换引导程序手风琴时触发的动画

https://getbootstrap.com/docs/5.0/components/accordion/

我已经为我的问题创建了一个最小可复制的例子，比如这个

代码

index.js

import "./styles.css";
import { useState } from "react";
export default function App() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<div className="App">
<div className="flex">
<ul>hello</ul>
<button onClick={() => setIsExpanded((prev) => !prev)}>
{isExpanded ? "-" : "+"}
</button>
</div>
{isExpanded ? (
<>
<p>Item1</p>
<p>Item1</p>
<p>Item1</p>
<p>Item1</p>
</>
) : null}
</div>
);
}

样式.css

.App {
font-family: sans-serif;
text-align: center;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.flex button {
height: 20px;
background-color: red;
color: white;
}
.flex button:hover {
cursor: pointer;
}

代码沙盒链接

https://codesandbox.io/s/festive-meadow-v0cnz?file=/src/App.js

Answer 1

您可以通过使用最大高度&切换类。因此，您的组件项目区域将变为：

<div class={`content ${isExpanded ? 'active': ''}`}>
<p>Item1</p>
<p>Item1</p>
<p>Item1</p>
<p>Item1</p>
</div>

然后将其添加到您的样式中：

.content {
border: 1px solid #000;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 200ms ease, opacity 200ms ease;
}
.content.active {
max-height: 1000px;
opacity: 1;
transition: max-height 600ms ease, opacity 200ms ease;
}