next.js 只使用css制作一个可折叠菜单

eimct9ow 于 2023-04-20 发布在其他

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

问题

我有一个未知高度的内容。为了举例的目的，称这个高度为
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？

next.js

来源：https://stackoverflow.com/questions/76061468/make-a-collapsible-menu-using-css-only

1条答案

按热度按时间

hmmo2u0o1#

要使过渡只使用CSS顺利发生，您需要在扩展和收缩元素上设置transition属性。这将确保两个元素在过渡期间平滑地动画。
在示例代码中，您已经在折叠元素（具有max-height的div）上设置了transition属性，但还需要将其添加到扩展元素（具有虚拟内容的div）。以下是如何修改代码以实现此目的：

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: "max-height 1s ease",
          maxHeight: minimized
            ? MINIMIZED_CONTENT_HEIGHT
            : NORMAL_CONTENT_HEIGHT
        }}
      >
        <div
          style={{
            height: DUMMY_CONTENT_HEIGHT,
            backgroundColor: "rgb(255 0 0)",
            transition: "height 1s ease" // add transition property here
          }}
        ></div>
      </div>
      <div
        style={{
          gridRow: "3",
          gridColumn: "1",
          height: 50,
          backgroundColor: "rgb(50 0 0)",
        }}
      ></div>
    </div>
  );
}

赞(0）回复(0）举报 2023-04-20

我来回答

next.js 只使用css制作一个可折叠菜单

问题

问题

1条答案

相关问题

热门标签

最新问答