React Card Flip 错误 - Safari - 翻转后卡片未按预期调整大小

Question

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

Safari 中似乎有问题第一次翻转发生后，调整大小无法按预期工作（您可以看到它在第一次翻转之前工作正常）。

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

https://master.d35k32uc23ao8f.amplifyapp.com

How the resizing should perform

How it performs after the flip (incorrect)

如果您在 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%',
    },

React Card Flip 错误 - Safari - 翻转后卡片未按预期调整大小

React Card Flip bug - Safari - Card not resizing as expected after flip

reactjs

card-flip