关闭组件时成帧器运动不会转换

Question

关闭侧边栏等条件渲染组件时，我在过渡效果方面遇到问题。打开时可以正常工作，但关闭时则不行。有人可以帮助我吗？

    const { cartBarOpen } = useSelector((rootReducer: any) => rootReducer.cartBarReducer)

    const handleCloseCart = () => {
        setTimeout(() => {
            dispatch({ type: cartBarActionTypes.CLOSE });
        }, 500);
    };

    const containerVariants = {
        hidden: {
            x: "100%"
        }, // Inicialmente, a janela estará fora da tela à direita
        visible: {
            x: 0, // Quando a janela estiver visível, ela estará na posição original (x: 0)
            transition: {
                duration: 0.5,
                type: 'tween',
                ease: 'easeInOut'
            }
        },
        exit: {
            x: "100%",
            transition: {
                duration: 0.5,
                type: 'tween',
                ease: 'easeInOut'
            }
        }, // Ao sair, a janela deve deslizar de volta para fora da tela à direita
    };

return (
        <>
            <AnimatePresence>
                {cartBarOpen && (
                    <CartContainer
                        variants={containerVariants}
                        initial="hidden"
                        animate={cartBarOpen ? "visible" : "hidden"}
                        exit="hidden"
                    >
                        <ContainerTop>
                            <CartTitle>Carrinho de Compras</CartTitle>
                            <CloseCart onClick={handleCloseCart}>X</CloseCart>
                        </ContainerTop>
                        <CartContent>
                        </CartContent>
                        <ContainerBottom>
                        </ContainerBottom>
                    </CartContainer>

                )}
            </AnimatePresence>
        </>
    );

我已经尝试了一切，但我无法得到任何答案...即使使用样式组件关键帧它也不起作用...

Answer 1

你有重复的逻辑。使用 AnimatePresence 时，当您希望元素离开/进入时，无需更改 animate 属性。将

animate={cartBarOpen ? "visible" : "hidden"}

更改为

animate="visible"

。

<AnimatePresence>
    {cartBarOpen && (
        <CartContainer
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            exit="hidden"
        >
            <ContainerTop>
                <CartTitle>Carrinho de Compras</CartTitle>
                <CloseCart onClick={handleCloseCart}>X</CloseCart>
            </ContainerTop>
            <CartContent>
            </CartContent>
            <ContainerBottom>
            </ContainerBottom>
        </CartContainer>
    )}
</AnimatePresence>