I'm building a Tabler dashboard using some ReactJS components. At first I used normal HTML pages and Jinja2 templates, but I started implementing ReactJS for some components.
I don't want to use too many third-party tools like react-tabler or bootstrap-tabler because it creates a lot of extra packages that I probably don't really need. I've been able to create a beautiful Tabler dashboard using ReactJS components without the need for these packages.
The only problem I have right now is showing the modal...right now this works, but the CSS transitions don't. At least not at first. I made them work like this:
// handle button click
const handleEditClick = (row) => {
setIsModalOpen(true);
modalRef.current.style.display = "block";
// delay to make sure block is set first
setTimeout(() => {
modalRef.current.classList.add("show");
}, 100);
};
The problem is, I don't really like this. It feels a bit cliche.
The display modal works fine, just add the style="display:block attribute first and then the show class. This way I can do it without too much extra JavaScript or works without other content. But display:block must be set first, if not, they seem to be set at the same time, or maybe display:block is set later, so you don't You will see the conversion.
I tried adding the following event lister modalRef.current.addEventListener("transitionend", handleTransitionEnd);, but I guess this only works for the actual transition and not for changing the style.
Is there a cleaner way than a 100 millisecond timeout? Apparently I can't add display:block by default because then my app will be inaccessible due to the transparent mode that is on top of my app.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is how I fixed it now. I used useEffect twice, this is to prevent the class "show" from being added at the same time as the
display:blockstyle.To close the modal, I can actually use the
transitionendevent listener.const MyComponent = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [isButtonClicked, setIsButtonClicked] = useState(false); const modalRef = useRef(null); const [isStyleApplied, setIsStyleApplied] = useState(false); const [isClassApplied, setIsClassApplied] = useState(false); const handleEditClick = () => { setIsModalOpen(true); setIsButtonClicked(true); }; useEffect(() => { const applyStyle = () => { if (modalRef.current && !isStyleApplied && isButtonClicked) { modalRef.current.style.display = 'block'; setIsStyleApplied(true); } }; applyStyle(); }, [isButtonClicked, isStyleApplied]); useEffect(() => { const applyClass = () => { if (modalRef.current && isButtonClicked && isStyleApplied && !isClassApplied) { modalRef.current.classList.add('show'); setIsClassApplied(true); } }; applyClass(); }, [isButtonClicked, isStyleApplied, isClassApplied]); const handleCloseModal = () => { setIsModalOpen(false); modalRef.current.addEventListener("transitionend", handleTransitionEnd); modalRef.current.classList.remove("show"); function handleTransitionEnd() { modalRef.current.removeEventListener("transitionend", handleTransitionEnd); modalRef.current.style.display = "none"; } setIsButtonClicked(false); setIsStyleApplied(false); setIsClassApplied(false); }; return ( handleEditClick(row)} href="#">Open Modal