Плавное расширение щелченого Div в макете сетки ⇐ Javascript

[Anonymous]

Я делаю свой веб -сайт CV, и все сработало идеально, пока я не хотел добавить анимации, чтобы элементы сетки были изменением размера плавного размера. Мой проект React основан на сетке сетки, в которой есть элементы строгого размера, чтобы соответствовать ожидаемому дизайну. Идея заключалась в том, чтобы сделать сетку, в которой элемент щелчка изменялся, чтобы заполнить всю сетку, тогда как другие элементы (те, которые не были нажаты), исчезнут до тех пор, пока не будет закрыт элемент щелчка. Сетка должна быть каким -то типом предварительного просмотра в другие DOV. Тем не менее, я имею дело с проблемой сглаживания предварительного просмотра элемента Clicked (создание плавной анимации). < /P>
my -кодовая страница .tsx: < /h2>

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

"use client";
import styles from "./page.module.css";
import React from "react";
import Section from "@/components/Section";

export default function Home() {
const [clickedIndex, setClickedIndex] = React.useState(undefined);
const sections = [
{ id: "sectionA", title: "About Me", description: "", text: "", photo:  },
{ id: "sectionB", title: "Carrier", description: "Curious about my carrier?", text: ""},
{ id: "sectionC", title: "Education", description: "", text: "" },
{ id: "sectionD", title: "Experiences", description: "", text: ""}
];

function onClick(event: React.MouseEvent) {
const id = event.currentTarget.id;
setClickedIndex(id);
}

function clickOnCross() {
setClickedIndex(undefined);
}

return (

{sections.map((section) => (

))}

);
}
< /code>
 page.module.css:
.gridContainer {
margin: 50px auto;
display: grid;
height: 700px;
width: 600px;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
< /code>
section.tsx
import React, {useEffect} from "react";
import styles from "./Section.module.css";

interface SectionProps {
id: string;
title: string;
description: string;
onClick: (event: React.MouseEvent) => void;
expanded: boolean;
isHidden: boolean;
backBtn: boolean;
clickOnCross: () => void;
text?: string;
photo?: React.ReactNode;
}

const Section: React.FC = ({
id,
title,
description,
onClick,
expanded,
isHidden,
backBtn,
clickOnCross,
text,
photo
}) => {

return (
id={id}
className={`${styles[id]} ${expanded ? styles.expanded : ""} ${isHidden ? styles.hidden : ""}`}
onClick={onClick}
>

{photo}
{title}
  {
event.stopPropagation();
clickOnCross();
}} className={backBtn ? styles.crossButton : styles.hidden}>X


{description}
{text}

);
};

export default Section;
< /code>
section.module.css:
.sectionA, .sectionB, .sectionC, .sectionD {
border: 2px solid var(--foreground);
padding: 20px;
border-radius: 30px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
/* Expanded section takes full grid */
.expanded {
grid-column: span 2; /* Stretches across all columns */
grid-row: span 3; /* Stretches across all rows */
transition: all 0.5s ease-in-out;

}
/* Hide other sections */
.hidden {
opacity: 0;
transition: opacity 0.3s ease-in-out;
pointer-events: none
}
< /code>
Я обнаружил, что не могу анимировать скрытие элементов на случай, если я буду использовать дисплей: нет;  

Свойство, так как это свойство не может быть анимировано. После этого я попытался установить видимость свойства: hidden; Однако это свойство может быть анимированным, но не удаляет элементы из потока HTML. В соответствии с этим свойством элемент щелчка не может быть растянут, чтобы заполнить всю сетку.

Подробнее здесь: https://stackoverflow.com/questions/794 ... rid-layout