After implementing a custom accordion using next.js, I encountered an issue where the slide animation worked successfully when moving up and out upon clicking the button. However, when trying to move it back down into the content, it did not animate as expected, but instead directly pasted itself into the DOM.
Here are the attempts I made:
Below is the relevant JavaScript code:
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>
</>
)
}
The corresponding CSS code is as follows:
.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 */
}
Despite the smooth sliding motion for transform translateY(-100%), there seems to be an issue as it fails to slide back in smoothly using translateY(0); instead, it simply appears on the page without animating.