Блог

Я создаю приложение, которое может переворачивать карты, и при наведении курсора на карту размер сфокусированной карты должен быть равен 30 Вт, а другие карты — 15 Вт. При наведении курсора мыши на все карты все они должны вернуться к исходному 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>
  );
}
  

Решена! Если кто-нибудь столкнется с этой проблемой, перейдите в ReactCardFlip.ts модули вашего узла и удалите width: 100% в строке 64. Вам также необходимо удалить другое width: 100% в строках 56 и 66.

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