react我希望空白在菜单显示之前消失

Question

我使用react和style -components。
按分组菜单时，会显示box1和box2。
当box1和box2不显示时，组和用户之间有空白，我想在box1和box2不显示时删除组和用户之间的空白。

我尝试过的
我使用dropVisible(state)来控制box1和box2是可见还是不可见。
当dropVisible为true时添加了display:none，当dropVisible为false时添加了display:block，这样动画就消失了。我想实现动画在一个工作的方式。

代码

import "./styles.css";
import styled from "styled-components";
import React, { useState, useCallback } from "react";
import { ArrowDown } from "./ArrowDown";
const Item = styled.div`
height: 40px;
width: 300px;
padding: 0px 30px;
text-align: initial;
font-size: 14px;
font-weight: bold;
color: #899098;
&:hover {
background: #fafbfb;
}
`;
const DropMenu = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
gap: 12px;
:hover {
color: gray;
}
div {
display: flex;
align-items: center;
gap: 12px;
}
`;
const DropText = styled.div`
padding-left: 32px;
`;
const DropMenuWrapper = styled.div<{ visible: boolean }>`
transition: all 0.2s ease;
opacity: ${(props) => (props.visible ? 1 : 0)};
`;
export const App = () => {
const [dropVisible, setDropVisible] = useState(false);
const handleDropVisibleChange = useCallback(() => {
setDropVisible((prevDropVisible) => !prevDropVisible);
}, [dropVisible]);
return (
<div className="App">
<Item onClick={handleDropVisibleChange}>
<DropMenu>
<div>
<span>Group</span>
</div>
<span
style={{
transition: "all 0.2s ease",
transform: `rotate(${dropVisible ? 0 : "0.5turn"})`
}}
>
<ArrowDown />
</span>
</DropMenu>
</Item>
<DropMenuWrapper visible={dropVisible}>
<Item>
<DropMenu>
<DropText>box1</DropText>
</DropMenu>
</Item>
<Item>
<DropMenu>
<DropText>box2</DropText>
</DropMenu>
</Item>
</DropMenuWrapper>
<Item>home</Item>
<Item>user</Item>
</div>
);
};
export default App;

Answer 1

我相信你的问题是，无论盒子是否不透明，它仍然占用空间。如果你缩小盒子，通过改变高度根据可见属性，然后它会做你想要的。您还可以将可见性更改为隐藏。

const DropMenuWrapper = styled.div<{ visible: boolean }>`
transition: all 0.2s ease;
opacity: ${(props) => (props.visible ? 1 : 0)};
height: ${(props) => (props.visible ? "100px" : "0px")};
visibility: ${(props) => (props.visible ? "visible": "hidden")}
`;

Answer 2

@inteoryx是正确的关于你的下拉菜单占用空间的所有时间，所以这就是为什么你的内容保留空白。

然而，与height的转换可能很棘手。虽然它适用于这个包含2个下拉项的基本应用程序，但每次从列表中添加或删除项时，您都必须更新下拉组件的高度。

过渡将不工作height和width值auto，这是浏览器中html的默认状态。这就是浏览器如何计算元素所需的确切大小。它将在从两个固定值转换时工作，无论是px,rem还是其他。

如果你愿意稍微改变一下你的布局，我有一个建议，这将适用于动态项目的下拉菜单:

const DropMenuWrapper = styled.div<{ visible: boolean }>`
transition: all 0.2s ease;  
transform: ${(props) => (props.visible ? "" : "scaleY(0)")};
transform-origin: top;
position: absolute;
background: white;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
`;

这会将下拉菜单从流中移出，并且它永远不会将任何其他项移出。这是一个相当标准的行为在整个网络的下拉菜单，所以你必须做出一个有意识的风格决定，而不是有这个行为，但这是你的选择。

除了这些样式的变化，我还添加了一个margin-bottom到你的Item组件，使更多的空间，现在的项目是紧挨着下拉菜单。