我用next.js做了一个自定义的 accordion ，当按钮被成功点击时，幻灯片会向上和向外移动。但是当它应该向下移动并进入内容时，它不会向下移动，而是直接将自己粘贴到DOM中。
以下是我尝试的方法
下面是JS FILE的一些相关代码

import { useState, useEffect, useRef } from "react";
import styles from "NEXT.JS FROM A CSS FILE BELOW SHOWING THE CSS CODE";

const AsideCheckout = (props) => {
    const [accordionClick, setAccordionClick] = useState(false);
    const asideRef = useRef(null);

    const slideInAside = (e) => {
        setAccordionClick(!accordionClick);

        if (accordionClick !== false) {
            setTimeout(() => {
                asideRef.current.style.display = "none"; // works when the slide slides up and out i remove it with display none and the content below pushes itself up
            }, 400);
        }

        if (accordionClick !== true) {
            asideRef.current.style.display = "block"; // some how doesn't slide in from the top just pastes itself on the DOM THE PROBLEM
        }
    }

    useEffect(() => {
        asideRef.current.style.display = "none"; // initial launch making it display none
    }, []);

return (
<>
         <div className={styles.aside_accordion_button} onClick={slideInAside}>
            <button>CLICK</button>
         </div>
         <aside ref={asideRef} className={[styles.aside_checkout, accordionClick === true && styles.aside_show_checkout].join(" ")}>
           ... aside content etc
         </aside>
</>
)
}

CSS代码

.aside_checkout {
        grid-column: 1;
        grid-row: -2;
        overflow-y: hidden;
        transform: translateY(-100%);
        transition: transform 0.7s ease-in-out;
        /* display: none; commented out doing this in js */
    }

    .aside_show_checkout {
        transform: translateY(0);
        /* display: block; commented out doing this in js */
        transition: transform 0.7s ease-out;
    }

    .aside_accordion_button {
        grid-row: -3; // THIS IS THE BUTTON placed above the aside content with grid-row -3
        display: flex;
/* some of the properties emitted here CUZ not RELEVANT */
    }

因此，它可以在transform translateY(-100%)中向上和向外滑动，没有问题。当我想用translateY(0)的代码将其向后滑动时，它不会从顶部滑入，而是在页面上粘贴自己