我用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)
的代码将其向后滑动时,它不会从顶部滑入,而是在页面上粘贴自己
1条答案
按热度按时间nnvyjq4y1#
已设法修复
在slideInAside函数的if块中,我使用了setTimeout,因为我认为我需要稍微减慢React的速度,时间是0零
然后在JSX中我删除了这个
只是