我正在尝试使一个框在被单击时扩展(在宽度和高度上)并从其原点过渡到屏幕的中心。这是我到目前为止所拥有的:
我在这里遇到了两个问题——当我单击框时,DOM 会自动移动,因为单击的元素的位置已更改为 'absolute'
.另一个问题是盒子没有从它的原点转换,它从右下角转换(当点击make inactive
时,它也没有从屏幕中心返回到它的位置)。
我在这里做错了什么?
import React from "react";
import styled from "styled-components";
import "./styles.css";
export default function App() {
const [clickedBox, setClickedBox] = React.useState(undefined);
const handleClick = React.useCallback((index) => () => {
console.log(index);
setClickedBox(index);
});
return (
<Container>
{Array.from({ length: 5 }, (_, index) => (
<Box
key={index}
active={clickedBox === index}
onClick={handleClick(index)}
>
box {index}
{clickedBox === index && (
<div>
<button
onClick={(e) => {
e.stopPropagation();
handleClick(undefined)();
}}
>
make inactive
</button>
</div>
)}
</Box>
))}
</Container>
);
}
const Container = styled.div`
display: flex;
flex-wrap: wrap;
align-items: center;
height: 100vh;
`;
const Box = styled.div`
flex: 1 0 32%;
padding: 0.5rem;
cursor: pointer;
margin: 1rem;
border: 1px solid red;
transition: 2s;
background-color: white;
${({ active }) => `
${
active
? `
position: absolute;
width: 50vw;
height: 50vh;
background-color: tomato;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`
: ""
}
`}
`;
最佳答案
使用 CSS
你不太可能用简单的 css
来实现它。 .并且肯定不可能实现通用的解决方案。
div
从布局几乎不可能避免搞砸布局(即使可以,总会有一些边缘情况)。 relative
过渡到 fixed
位置。 用电流
css
标准是不可能执行这些事情的。用JS
解决办法是做一些
javascript
魔法。由于您使用的是 React
我使用 react-spring
为您开发了一个解决方案(一个动画框架)。在这里,您有一个包装组件可以执行您想要的操作:The complete SandBox
import React, { useEffect, useRef, useState } from "react";
import { useSpring, animated } from "react-spring";
export default function Popping(props) {
const cont = useRef(null);
const [oriSize, setOriSize] = useState(null);
const [finalSize, setFinalSize] = useState(null);
useEffect(() => {
if (props.open && cont.current) {
const b = cont.current.getBoundingClientRect();
setOriSize({
diz: 0,
opacity: 0,
top: b.top,
left: b.left,
width: b.width,
height: b.height
});
const w = window.innerWidth,
h = window.innerHeight;
setFinalSize({
diz: 1,
opacity: 1,
top: h * 0.25,
left: w * 0.25,
width: w * 0.5,
height: h * 0.5
});
}
}, [props.open]);
const styles = useSpring({
from: props.open ? oriSize : finalSize,
to: props.open ? finalSize : oriSize,
config: { duration: 300 }
});
return (
<>
<animated.div
style={{
background: "orange",
position: "fixed",
display:
styles.diz?.interpolate((d) => (d === 0 ? "none" : "initial")) ||
"none",
...styles
}}
>
{props.popup}
</animated.div>
<div ref={cont} style={{ border: "2px solid green" }}>
{props.children}
</div>
</>
);
}
注意:此代码使用两个 <div>
,一个用来包装你的内容,第二个总是 fixed
但隐藏。当您切换弹出窗口的可见性时,包装 div 被测量(我们获得它在屏幕上的大小和位置)和 fixed
div 从该位置动画到其最终位置。您可以通过在 <div>
中呈现相同的内容来实现您正在寻找的错觉。 ,但总是存在轻微错位的风险。
关于javascript - 如何在不影响 DOM 的情况下使框展开并从原点过渡到屏幕中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69011850/