英文:
MUI Slide animation smooth push out of elements
问题
我目前正在尝试在卡片上的按钮中使用 React MUI 的 [Slide][1]。幻灯片动画效果很好，但是当元素挂载时，它会立即将其上方的内容弹出到顶部，因为在挂载时元素的高度是完整的。
有人有解决这个问题的想法吗？当前的结构如下：
<Slide
unmountOnExit
key={2}
direction="up"
in={showLink}
container={containerRef.current}>
<Button
sx={{
mt: 1,
}}
variant="contained"
color="secondary">
立即支持
</Button>
</Slide>
[![输入图像说明][2]][2]
[1]: https://mui.com/material-ui/transitions/#slide
[2]: https://i.stack.imgur.com/vPZPi.gif
英文:
I am currently trying to use the React MUI Slide in a button over a card. The slide animation works well, however it snaps out the content over it to the top instantly when it mounts since the element is with full height when it mounts.
Does anyone have ideas on how to solve that. This is the structure currently:
<Slide
unmountOnExit
key={2}
direction="up"
in={showLink}
container={containerRef.current}>
<Button
sx={{
mt: 1,
}}
variant="contained"
color="secondary">
Support now
</Button>
</Slide>
答案1
得分: 1
以下是代码部分的翻译：
如果您将position: "absolute"应用于按钮，并将position: "relative"应用于containerRef所引用的组件，您将取消滑动按钮的块定位，并获得我认为您想要的行为。
const containerRef = useRef();
[...]
<ContainerBox
ref={containerRef}
sx={{ position: "relative", overflow: "hidden" }}
>
<Slide {...slideProps} >
<Button
sx={{ position: "absolute" }}
>
Button
</Button>
</Slide>
</ContainerBox>
编辑：
响应评论，尝试使文本在悬停时与按钮一起过渡。
由于 MUI 的 Slide 仅为子元素添加内联过渡样式，您可以使用一些简单的 CSS 模仿相同的行为。通过将相同的过渡属性应用于文本和按钮元素，它们应该表现相同。此外，您可以使用 useTheme() 钩子从主题中获取过渡变量。
例如：
const theme = useTheme();
const transitionStyle = {
position: "absolute",
bottom: `${hovered ? "0px" : "-36px"}`,
transitionProperty: "bottom",
transitionDuration: `${theme.transitions.duration.standard}ms`,
transitionTimingFunction: `${theme.transitions.easing.easeIn}`
};
[...]
<Typography
sx={{
...transitionStyle,
marginBottom: "36px" //将文本推上按钮的高度
}}
>
Stuff
</Typography>
<Button variant="contained" sx={transitionStyle}>
Button
</Button>
这是我想出的代码：CodeSandbox 链接
英文:
If you apply position: "absolute" to the button and position: "relative" to the component to which containerRef refers, you will remove the block positioning of the sliding button and get the behavior that I think you want.
const containerRef = useRef();
[...]
<ContainerBox
ref={containerRef}
sx={{ position: "relative", overflow: "hidden" }}
>
<Slide {...slideProps} >
<Button
sx={{ position: "absolute" }}
>
Button
</Button>
</Slide>
</ContainerBox>
Edit:
In response to the comment and to try and to get the text to transition along with the button on hover.
Since MUI Slide simply adds in-line transition styling to the child element, you can mimic the same behavior with some simple CSS. By applying the same transition properties to both the text and button elements, they should act the same. Also, you can pull the transition variables from the theme by the useTheme() hook.
eg:
const theme = useTheme();
const transitionStyle = {
position: "absolute",
bottom: `${hovered ? "0px" : "-36px"}`,
transitionProperty: "bottom",
transitionDuration: `${theme.transitions.duration.standard}ms`,
trasitionTimingFunction: `${theme.transitions.easing.easeIn}`
};
[...]
<Typography
sx={{
...transitionStyle,
marginBottom: "36px" //push the text up by the button height
}}
>
Stuff
</Typography>
<Button variant="contained" sx={transitionStyle}>
Button
</Button>
Here's what I came up with: CodeSandbox Link
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论