Почему возникает странная анимация растяжения при нажатии на элемент в пользовательском интерфейсе моей книжной полки с ⇐ CSS

[Anonymous]

Я работаю над пользовательским интерфейсом книжной полки в Next.js, используя Framer Motion для анимации и Tailwind CSS для стилизации. Каждая книга представляет собой интерактивный элемент li с функциями наведения и щелчка. Проблема, с которой я столкнулся, заключается в том, что когда я нажимаю на книгу, происходит странная анимация «растягивания», и я не могу понять, почему.
Поведение:

• При наведении на книгу она слегка приподнимается (translate-y).
• При нажатии , выбранная книга развернется и отобразится подробная информация.
• Однако при нажатии книга неожиданно «растягивается» или меняет размер, прежде чем принять окончательное состояние.

Вот текущее состояние состояние проблемы: веб-сайт
Код:
Вот соответствующий код:

Код: Выделить всё

// Book.js
import { motion } from "framer-motion";
import Image from "next/image";
import { useState } from "react";

export default function Book({ data, isSelected, onSelect, isAnyHovered, onHover }) {
const { title, author, route, year } = data;
const [isHovered, setIsHovered] = useState(false);
const [imageSize, setImageSize] = useState({ width: 0, height: 0 });

const handleImageLoad = ({ target }) => {
setImageSize({ width: target.naturalWidth / 4, height: target.naturalHeight / 4 });
};

const getImageClassName = () => {
let className = "transition-all duration-800";

if (isHovered) {
className += " opacity-100 -translate-y-2";
} else {
className += " opacity-40 translate-y-0";
}

return className;
};

return (

 onSelect(data)}>
 {
setIsHovered(true);
onHover(data);
}}
onMouseLeave={() => {
setIsHovered(false);
onHover(null);
}}
/>

{isSelected && (

{title}
by {author}
{year}

)}

);
}

Код: Выделить всё

// page.js
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";
import Book from "./Book";

export default function Home() {
const [books, setBooks] = useState([]);
const [selectedBook, setSelectedBook] = useState(null);
const [hoveredBook, setHoveredBook] = useState(null);

const handleSelectBook = (book) => {
setSelectedBook(selectedBook === book ? null : book);
};

return (
[list]

{books.map((book) => (

))}

[/list]
);
}

Наблюдения:

• Элемент motion.li использует макет Framer Motion, который может
  вызывать эффект растяжения.
• Компонент Image динамически
  вычисляет свой размер с помощью naturalWidth и naturalHeight. Может ли этот
  перерасчет способствовать возникновению проблемы?
• Классы перехода и
  преобразования Tailwind (translate-y,transition-all и т. д.) могут быть
  конфликтует с макетом Framer Motion.

Что я пробовал:

• Удаление макета из motion.li, но это нарушает анимацию.
• Отключение всех классов перехода Tailwind — это не решило проблему.
• Жесткое кодирование ширины и высоты изображения вместо вычисления их динамически — это уменьшило, но не устранило эффект растяжения.

Вопрос:

• Почему происходит растягивающаяся анимация, когда книга нажали?
• Как предотвратить странный эффект изменения размера/растяжения, сохранив при этом анимацию при наведении и выборе без изменений?

Будем очень признательны за любые идеи о том, как Tailwind CSS и Framer Motion могут взаимодействовать (или конфликтовать). Дайте мне знать, если потребуется дополнительный контекст или код!

Подробнее здесь: https://stackoverflow.com/questions/793 ... my-bookshe