ReactJS 动画展示隐藏的div - 使用React Transition Group

在React中使用动画来展示一个div从display: none状态切换为flex状态，你可以使用CSS动画库如Animate.css或React Transition Group。\n\n下面是使用React Transition Group来实现这个效果的示例代码：\n\n1. 首先，安装React Transition Group库：\n\n\nnpm install react-transition-group\n\n\n2. 在你的组件中引入所需的模块：\n\njsx\nimport React, { useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport './YourComponent.css'; // 引入CSS样式文件\n\n\n3. 在你的组件函数中添加一个状态变量来控制div的显示与隐藏：\n\njsx\nconst YourComponent = () => {\n const [isVisible, setIsVisible] = useState(false);\n\n const toggleVisibility = () => {\n setIsVisible(!isVisible);\n };\n\n return (\n <div>\n <button onClick={toggleVisibility}>Toggle</button>\n\n <CSSTransition\n in={isVisible}\n timeout={300}\n classNames="fade"\n unmountOnExit\n >\n <div className="your-div">Content</div>\n </CSSTransition>\n </div>\n );\n};\n\nexport default YourComponent;\n\n\n4. 创建一个CSS样式文件（例如YourComponent.css）并添加动画效果样式：\n\ncss\n.fade-enter {\n opacity: 0;\n}\n\n.fade-enter-active {\n opacity: 1;\n transition: opacity 300ms;\n}\n\n.fade-exit {\n opacity: 1;\n}\n\n.fade-exit-active {\n opacity: 0;\n transition: opacity 300ms;\n}\n\n.your-div {\n display: flex;\n}\n\n\n在上面的示例中，我们使用CSSTransition组件将div包裹起来，并根据isVisible状态变量的值来切换div的显示与隐藏。我们还定义了.fade-enter和.fade-exit类来设置div的透明度动画效果。当isVisible为true时，div会通过.fade-enter和.fade-enter-active类逐渐显示出来；当isVisible为false时，div会通过.fade-exit和.fade-exit-active类逐渐隐藏。\n\n当你点击按钮时，toggleVisibility函数会被调用，从而切换isVisible状态的值，触发div的显示与隐藏动画。