Transitions modales dans ReactJS Tabler/Bootstrap

Question

Je construis un tableau de bord Tabler en utilisant certains composants ReactJS. Au début, j'utilisais des pages HTML normales et des modèles Jinja2, mais j'ai commencé à implémenter ReactJS pour certains composants.

Je ne veux pas utiliser trop d'outils tiers comme React-Tabler ou Bootstrap-Tabler car cela crée beaucoup de packages supplémentaires dont je n'ai probablement pas vraiment besoin. J'ai pu créer un magnifique tableau de bord Tabler à l'aide de composants ReactJS sans avoir besoin de ces packages.

Le seul problème que j'ai en ce moment est d'afficher le modal... Maintenant, cela fonctionne, mais pas les transformations CSS. Au moins pas au début. Je les fais fonctionner ainsi :

// 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);
};

Le problème, c'est que je n'aime pas vraiment ça. Cela semble un peu cliché.

Show modal fonctionne très bien, ajoutez simplement style="display:block 属性，然后添加 show 类。这样我就可以在没有太多额外 JavaScript 或其他内容的情况下工作。但是 display:block 必须设置首先，如果没有，它们似乎是同时设置的，或者可能是 display:block d'abord et définissez-le plus tard pour ne pas voir la transition.

J'ai essayé d'ajouter la liste d'événements suivante modalRef.current.addEventListener("transitionend", handleTransitionEnd); mais je suppose que cela ne fonctionne que pour la transformation réelle et non pour changer le style.

Existe-t-il un moyen plus propre qu'un délai d'attente de 100 ms ? Apparemment, je ne peux pas ajouter display:block par défaut car mon application sera alors inaccessible en raison du mode de transparence qui se trouve au-dessus de mon application.

Answer 1

C'est ainsi que je le répare maintenant. J'ai utilisé useEffect deux fois, c'est pour éviter que la classe "show" soit ajoutée en même temps que le style display:block.

Pour fermer le modal, je peux en fait utiliser un écouteur d'événement transitionend.

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
        
    );
}