Почему происходит небольшое зависание при удалении AnimatePresenceframer.div? ⇐ CSS

[Anonymous]

Я пытаюсь создать компонент «Аккордеон» в React, который плавно анимирует открытие и закрытие раздела «контент», увеличивая высоту. Я пришел к приведенному ниже коду с помощью некоторых онлайн-руководств, и кажется, что все работает нормально, но когда завершается «закрывающий» переход в элементе содержимого, наблюдается заметное заикание. Он открывается плавно, но при повторном нажатии он плавно закрывается примерно на 90%, а затем переходит в закрытое состояние. Почему это так и как это исправить?
Я посмотрел, может ли помочь свойство макета, но его установка на моем компоненте-аккордеоне не изменила никакого поведения. https://www.framer.com/motion/layout-animations/ Я подумал, что это может быть как-то связано с этим, учитывая, что я анимирую высоту. Я также не уверен, может ли высота: auto препятствовать плавной анимации. Этот компонент используется в проекте Astro с клиентом: load prop.

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

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Arrow from "/FAQ_Arrow.svg"; // a chevron

export default function Accordion({ header, text }) {
const [isOpen, toggleOpen] = useState(false);
return (

 toggleOpen(!isOpen)}
>
{header}
[img]{Arrow}
className={`transition-all duration-300 ${
isOpen ? "-rotate-180" : ""
}`}
/>


{/* Expanded text */}

{isOpen && (

{text}

)}


);
}

Я также собрал базовые астрокоды и коробку, которая демонстрирует проблему: https://codesandbox.io/p/sandbox/vigorous-breeze-d842q8


Подробнее здесь: https://stackoverflow.com/questions/766 ... is-removed