Modale Übergänge in ReactJS Tabler/Bootstrap

Question

Ich erstelle ein Tabler-Dashboard mit einigen ReactJS-Komponenten. Zuerst habe ich normale HTML-Seiten und Jinja2-Vorlagen verwendet, aber ich habe begonnen, ReactJS für einige Komponenten zu implementieren.

Ich möchte nicht zu viele Tools von Drittanbietern wie React-Tabler oder Bootstrap-Tabler verwenden, da dadurch viele zusätzliche Pakete erstellt werden, die ich wahrscheinlich nicht wirklich benötige. Ich konnte mit ReactJS-Komponenten ein schönes Tabler-Dashboard erstellen, ohne dass diese Pakete erforderlich waren.

Das einzige Problem, das ich derzeit habe, ist die Anzeige des Modals ... Das funktioniert nun, die CSS-Transformationen jedoch nicht. Zumindest zunächst nicht. Ich lasse sie so funktionieren:

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

Die Sache ist, ich mag das nicht wirklich. Es fühlt sich ein bisschen klischeehaft an.

Modal anzeigen funktioniert großartig. Fügen Sie einfach zuerst style="display:block 属性，然后添加 show 类。这样我就可以在没有太多额外 JavaScript 或其他内容的情况下工作。但是 display:block 必须设置首先，如果没有，它们似乎是同时设置的，或者可能是 display:block hinzu und legen Sie es später fest, damit Sie den Übergang nicht sehen.

Ich habe versucht, die folgende Ereignisliste hinzuzufügen modalRef.current.addEventListener("transitionend", handleTransitionEnd);, aber ich denke, das funktioniert nur für die eigentliche Transformation und nicht für die Änderung des Stils.

Gibt es einen saubereren Weg als eine Zeitüberschreitung von 100 ms? Anscheinend kann ich display:block standardmäßig nicht hinzufügen, da dann auf meine App aufgrund des Transparenzmodus, der sich über meiner App befindet, nicht zugegriffen werden kann.

Answer 1

这就是我现在修复它的方法。我使用了两次 useEffect，这是为了防止类“show”与 display:block 样式同时添加。

要关闭模态框，我实际上可以使用 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
        
    );
}