Warum gibt es eine seltsame Streckungsanimation, wenn ich mit Framer Motion und Tailwind CSS in Next.js auf ein Element ⇐ CSS

[Guest]

Ich arbeite an einer Bücherregal-Benutzeroberfläche in Next.js und verwende Framer Motion für Animationen und Tailwind CSS für das Styling. Jedes Buch ist ein interaktives Li-Element mit Hover- und Klick-Funktionalität. Das Problem, mit dem ich konfrontiert bin, ist, dass, wenn ich auf ein Buch klicke, eine seltsame „Dehnungs“-Animation abläuft und ich nicht herausfinden kann, warum.
Verhalten:

• Wenn man mit der Maus über ein Buch fährt, wird es leicht angehoben (translate-y).
• Beim Klicken , das ausgewählte Buch wird erweitert, um Details anzuzeigen.
• Beim Klicken scheint sich das Buch jedoch unerwartet zu „dehnen“ oder seine Größe zu ändern, bevor es seinen endgültigen Zustand erreicht.

Hier ist der aktuelle Stand Stand dieser Ausgabe: Website
Code:
Hier ist der relevante Code:

Code: Select all

// 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}

)}

);
}

Code: Select all

// 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]
);
}

Beobachtungen:

• Das Element „motion.li“ verwendet das Layout von Framer Motion, das könnte
  den Dehnungseffekt verursachen.
• Die Bildkomponente berechnet ihre Größe dynamisch
  mit naturalWidth und naturalHeight. Könnte diese
  Neuberechnung zu dem Problem beitragen?
• Die Übergangs- und
  Transformationsklassen von Tailwind (translate-y, Transition-all usw.) könnten
  Konflikt mit dem Layout von Framer Motion.

Was ich versucht habe:

• Layout aus motion.li entfernen – aber Dadurch werden die Animationen unterbrochen.
• Das Deaktivieren der Tailwind-Übergangsklassen für alle Klassen – dadurch wurde das Problem nicht behoben.
• Hardcodierung der Bildbreite und -höhe statt Berechnung sie dynamisch – dadurch wurde der Dehnungseffekt reduziert, aber nicht beseitigt.

Frage:

• Warum passiert diese Dehnungsanimation, wenn ein Buch ist? angeklickt?
• Wie kann ich den seltsamen Größenänderungs-/Streckungseffekt verhindern und gleichzeitig die Animationen für Hover und Select intakt lassen?

Für Einblicke in die Interaktion (oder Konflikte) von Tailwind CSS und Framer Motion wären wir sehr dankbar. Lassen Sie mich wissen, wenn zusätzlicher Kontext oder Code benötigt wird!