问题
我有一个未知高度的内容。为了举例的目的,称这个高度为DUMMY_CONTENT_HEIGHT
我想让用户按下一个按钮,让内容折叠到一个已知的较小的高度,MINIMIZED_CONTENT_HEIGHT
我实现了这个(我需要在我的项目中使用网格),
import { useState } from "react";
export default function App(props) {
const [minimized, setMinimized] = useState(false);
const DUMMY_CONTENT_HEIGHT = 100;
const MINIMIZED_CONTENT_HEIGHT = 20;
const NORMAL_CONTENT_HEIGHT = "100%";
return (
<div style={{ display: "grid" }}>
<button
onClick={(e) => {
setMinimized(!minimized);
}}
style={{ gridRow: "1", gridColumn: "1" }}
>
CLICK ME
</button>
<div
style={{
gridRow: "2",
gridColumn: "1",
overflow: "hidden",
transition: "all 1s ease",
maxHeight: minimized
? MINIMIZED_CONTENT_HEIGHT
: NORMAL_CONTENT_HEIGHT
}}
>
<div
style={{ height: DUMMY_CONTENT_HEIGHT, backgroundColor: "rgb(255 0 0)" }}
></div>
</div>
<div
style={{
gridRow: "3",
gridColumn: "1",
height: 50,
backgroundColor: "rgb(50 0 0)",
}}
></div>
</div>
);
}
问题
问题在于,较低的内容无法与较高的内容平滑地进行动画处理。
请注意,将NORMAL_CONTENT_HEIGHT
设置为某个较大的值(如10000)可以工作,但动画与不同的CONTENT_HEIGHT
不一致(不是解决方案)。
你如何使过渡顺利发生,只用css?
1条答案
按热度按时间hmmo2u0o1#
要使过渡只使用CSS顺利发生,您需要在扩展和收缩元素上设置transition属性。这将确保两个元素在过渡期间平滑地动画。
在示例代码中,您已经在折叠元素(具有max-height的div)上设置了transition属性,但还需要将其添加到扩展元素(具有虚拟内容的div)。以下是如何修改代码以实现此目的: