javascript 使用Next.js/React.js时, accordion 效果向上滑动但不会向下滑动的问题

ttcibm8c  于 2023-03-11  发布在  Java
关注(0)|答案(1)|浏览(124)

我用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)的代码将其向后滑动时,它不会从顶部滑入,而是在页面上粘贴自己

nnvyjq4y

nnvyjq4y1#

已设法修复

在slideInAside函数的if块中,我使用了setTimeout,因为我认为我需要稍微减慢React的速度,时间是0零

const slideInAside = (e) => {
        setAccordionClick(!accordionClick);
     
        // from here
        if (accordionClick !== false) {
            asideRef.current.classList.remove(styles.aside_show_checkout); // removing it here instead than having it in JSX
            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

// needed to add the setTimeout like this as I think React needs to be slowdown

            setTimeout(() => {
                asideRef.current.classList.add(styles.aside_show_checkout); // adding it here inside the setTimeout instead than having it in JSX
            }, 0);
        }
    }

然后在JSX中我删除了这个

<aside ref={asideRef} className={[styles.aside_checkout, accordionClick === true && styles.aside_show_checkout].join(" ")}>
           ... aside content etc
         </aside>

只是

<aside ref={asideRef} className={styles.aside_checkout}> // JUST the main class
           ... aside content etc
         </aside>

相关问题