ReactJS 实现 Div 高度变化时的过渡效果 (无额外库)

要在React中实现div高度变化时的过渡效果，可以使用CSS过渡属性和React的状态管理功能来实现。\n\n首先，在CSS中定义一个过渡效果，如下所示：\n\ncss\n.transition-div {\n transition: height 0.3s ease;\n}\n\n\n然后，在React组件中使用状态来控制div的高度，并在div上添加相应的类名：\n\njsx\nimport React, { useState } from 'react';\n\nfunction MyComponent() {\n const [expanded, setExpanded] = useState(false);\n\n const toggleHeight = () => {\n setExpanded(!expanded);\n };\n\n return (\n <div className={`transition-div ${expanded ? 'expanded' : ''}`}>\n <button onClick={toggleHeight}>Toggle Height</button>\n {expanded && <p>Content</p>}\n </div>\n );\n}\n\nexport default MyComponent;\n\n\n在上面的代码中，我们使用useState钩子来管理expanded状态，该状态控制div的高度。当点击按钮时，toggleHeight函数将切换expanded状态的值。\n\n通过在div上使用${expanded ? 'expanded' : ''}，我们根据expanded状态的值来添加或删除类名。\n\n最后，我们可以在CSS中定义.expanded类名的样式，以实现高度变化的过渡效果：\n\ncss\n.transition-div {\n transition: height 0.3s ease;\n}\n\n.expanded {\n height: 200px;\n}\n\n\n当expanded为true时，div的高度将过渡到200px。\n\n这样，当点击按钮时，div的高度将平滑地过渡到200px，并在再次点击时回到初始高度。