Плавное расширение щелченого div в сетке сетки [закрыто] ⇐ CSS

[Anonymous]

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

моя кодовая страница.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