英文:
Div transform scale but only for container (react & tailwind)
问题
我有一些代码，看起来像这样：
const [selectedNum, setSelected] = useState(0)
let cards = [
{title: "1", description: "asdf"}, {title: "2", description: "fdas"}
]
return (
<div className="flex flex-wrap">
{cards.map((card, id)=>{
return(<CardObjectHere className={`${id === selectedNum ? 'scale-150' : 'scale-100'}`} />)
})}
</div>
)
我想要能够缩放div的背景，因为我想在选中时在div上显示更多信息。我对使用transforms有几个问题：
1）它会压缩圆角
2）它也会缩放文本（我尝试过将文本缩放方向相反，但不太有效）
我真的正在寻找一种替代transforms的方法，以缩放div的边框而不会使附近的div发生位移。
谢谢！
英文:
I have some code that looks like this:
const [selectedNum, setSelected] = useState(0)
let cards = [
{title: "1", description: "asdf"},{title: "2", description: "fdas"}
]
return(
<div className="flex flex-wrap">
{cards.map((card, id)=>{
return(<CardObjectHere className={`${id == selectedNum ? 'scale-150': 'scale-100'}`} />)
})}
</div>
)
I want to be able to scale the background of the div, since I want to display more information on the div when it is selected. There are several problems I have with using transforms:
- it squishes rounded corners
- it scales text as well (I've looked at scaling the text the opposite direction, but it doesn't really work)
I'm really looking for an alternative to transforms to scale a div's border without displacing nearby divs.
Thank you!
答案1
得分: 0
考虑将一个绝对定位的元素放在底部作为背景。这样可以在不影响内容的情况下进行缩放：
function CardObjectHere({ className }) {
return (
<div className="relative z-0">
Foo
<div className={`absolute -z-10 inset-0 bg-red-300/50 ${className}`} />
</div>
);
}
function App() {
const [selectedNum, setSelected] = React.useState(0)
let cards = [
{title: "1", description: "asdf"},{title: "2", description: "fdas"}
]
return (
<div className="flex flex-wrap">
{cards.map((card, id) => {
return (
<CardObjectHere className={`${id == selectedNum ? 'scale-150': 'scale-100'}`} />
)
})}
</div>
)
}
ReactDOM.createRoot(document.getElementById('app')).render(<App/>);
HTML 部分不需要翻译。
英文:
Consider having an absolutely positioned element underneath as the background. This lets you scale it without affecting the content:
<!-- begin snippet: js hide: false console: false babel: true -->
<!-- language: lang-js -->
function CardObjectHere({ className }) {
return (
<div className="relative z-0">
Foo
<div className={`absolute -z-10 inset-0 bg-red-300/50 ${className}`} />
</div>
);
}
function App() {
const [selectedNum, setSelected] = React.useState(0)
let cards = [
{title: "1", description: "asdf"},{title: "2", description: "fdas"}
]
return (
<div className="flex flex-wrap">
{cards.map((card, id) => {
return (
<CardObjectHere className={`${id == selectedNum ? 'scale-150': 'scale-100'}`} />
)
})}
</div>
)
}
ReactDOM.createRoot(document.getElementById('app')).render(<App/>);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="app"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论