反应卡翻转错误 - 野生动物园 - 翻转后卡未按预期调整大小

Question

我正在构建一个能够翻转卡片的应用程序，当您将鼠标悬停在卡片上时，聚焦卡片的大小应调整为 30vw，而其他卡片的大小应调整为 15vw。当您将鼠标悬停在所有卡上时，它们都应该回到原来的 20vw。

一旦发生第一次翻转，Safari中似乎出现了问题，调整大小无法按预期工作(您可以在第一次翻转之前看到它工作正常)。

您可以在 Safari 中查看我正在谈论的示例：

https://master.d35k32uc23ao8f.amplifyapp.com

调整大小应如何执行

翻转后的表现如何(不正确)

如果您在Chrome中查看，您将能够看到卡片翻转和调整大小，正如预期的那样。

据我所知，问题出在justify-content: start/flex-start上。我已经尝试了无数的flex/grid/float css解决方案，但似乎没有什么能够解决这个问题。例如，div 容器当前设置为：

.test-div {
width: 100vw;
display: flex;
flex-direction: row;
justify-content: flex-start;
}

提前感谢任何帮助，这让我发疯了！

这是我的卡组件：

import React, { useState } from "react";
import ReactCardFlip from "react-card-flip";
import TestCard from "./TestCard";
export default function Test() {
const [isFlipped, toggleFlip] = useState(false);
const [backGroundWidth, setBackgroundWidth] = useState({
onHover: "20vw",
offHover: "20vw",
id: null
});
const handleClick = () => {
toggleFlip(!isFlipped);
};
const hoverEffect = e => {
console.log(e.currentTarget);
const { id } = e.currentTarget;
const num = id.toString();
setBackgroundWidth({
...backGroundWidth,
offHover: "15vw",
onHover: "30vw",
id
});
};
const handleHoverOut = e => {
offHoverEffect(e);
};
const offHoverEffect = e => {
setBackgroundWidth({
offHover: "20.00vw",
onHover: "20.00vw",
id: null
});
};
// const offHover = () => {};
return (
<div>
<button
style={{ width: "50px", backgroundColor: "orange", color: "white" }}
onClick={handleClick}
>
Flip
</button>
<div className='test-div'>
<TestCard
handleHoverOut={handleHoverOut}
hoverEffect={hoverEffect}
isFlipped={isFlipped}
onHover={backGroundWidth.onHover}
offHover={backGroundWidth.offHover}
id={backGroundWidth.id}
divId={"1"}
color='blue'
/>
<TestCard
handleHoverOut={handleHoverOut}
hoverEffect={hoverEffect}
isFlipped={isFlipped}
onHover={backGroundWidth.onHover}
offHover={backGroundWidth.offHover}
id={backGroundWidth.id}
divId={"2"}
color='green'
/>
</div>
</div>
);
}

还有卡片本身：

import React from "react";
import ReactCardFlip from "react-card-flip";
export default function TestCard({
isFlipped,
onHover,
offHover,
id,
divId,
hoverEffect,
handleHoverOut,
color
}) {
return (
<ReactCardFlip isFlipped={isFlipped} flipDirection='horizontal'>
<div
onMouseOver={e => hoverEffect(e, "front")}
onMouseOut={handleHoverOut}
style={{
width: id === divId ? onHover : offHover,
backgroundColor: color,
color: "white"
}}
className='test-card'
id={divId}
>
Card should fit 20vw on hover.
</div>
<div
id={divId}
onMouseOver={e => hoverEffect(e, "front")}
onMouseOut={handleHoverOut}
style={{
width: id === divId ? onHover : offHover,
backgroundColor: color,
color: "white"
}}
className='test-card'
>
Card should fit 10vw off hover.
</div>
</ReactCardFlip>
);
}

Answer 1

解决了！如果有人遇到此问题，请在节点模块中转入ReactCardFlip.ts，然后删除第 64 行的width: 100%。您还需要删除第 56 行和第 66 行上的其他width: 100%。

flipper: {
height: '100%',
position: 'relative',
// width: '100%',
},