在退出时对 framer-motion "AnimatePresence" animation 做出反应，试图让它工作..noob framer-motion 用户

Question

我的所有动画都运行良好，除非我单击一个项目。 没有 animation 出。 卡项目动画，但没有 animation 出来。 我正在尝试实现 AnimatePresence，不得不承认我已经从周日开始重写了这个，然后又回来了，并试图在它上面跟着一些 tuts，但我似乎无法掌握它。 我使用 AnimateSharedLayout 进出路线动画。 这是跨三个页面的代码，试图在列出的项目到选定的项目之间转换 animation。

const containerVariants = {
    initial: {
        opacity: 0,
        y: '100vw',
        scale: 2,
    },
    in: {
        opacity: 1,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        y: '-100vw',
        scale: 0,
    },
};
const containerTransitions = {
    type: 'tween',
    ease: 'anticipate',
    duration: 2,
};
const containerVariants1 = {
    initial: {
        opacity: 0,
        x: '100vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        x: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        x: '-100vw',
        scale: 0,
    },
};
const containerTransitions1 = {
    type: 'tween',
    ease: 'anticipate',
    duration: 3,
};

const LGallery = () => {
    return (
        <>
            <AnimatePresence key={Items._id}>
                <motion.div
                    initial='initial'
                    animate='in'
                    key={Items._id}
                    exit='out'
                    variants={containerVariants}
                    transition={containerTransitions}
                    className='container'
                >
                    <h1>filler title</h1>

                    <Row
                        as={motion.div}
                        key={Items._id}
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants1}
                        transition={containerTransitions1}
                        className='card-list '
                    >
                        {Items.map((Items) => (
                            <Col key={Items._id}>
                                <WorkItems Items={Items} />
                            </Col>
                        ))}
                    </Row>
                </motion.div>
            </AnimatePresence>
        </>
    );
};

export default LGallery;

项目列表页面

const containerVariants = {
    initial: {
        opacity: 0,
        x: '-50vw',
        y: '10vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        x: 0,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        x: '10vw',
        y: '-50vw',
        scale: 0,
    },
};
const containerTransitions = {
    type: 'tween',
    ease: 'anticipate',
    duration: 4,
};
const containerVariants1 = {
    initial: {
        opacity: 0,
        y: '60vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        y: '-60vw',
        scale: 0,
    },
};
const containerTransitions1 = {
    type: 'tween',
    ease: 'anticipate',
    duration: 5,
};
const containerVariants2 = {
    initial: {
        opacity: 0,
        y: '-60vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        y: '60vw',
        scale: 0,
    },
};
const containerTransitions2 = {
    type: 'tween',
    ease: 'anticipate',
    duration: 5,
};

const WorkItems = ({ Items }) => {
    return (
        <>
            <AnimatePresence key={Items._id}>
                <Link to={`/work/${Items._id}`}>
                    <Card
                        as={motion.div}
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants}
                        transition={containerTransitions}
                        className='card-content-container'
                    >
                        <Link to={`/work/${Items._id}`}>
                            <Card.Img
                                className='card-image-container'
                                src={Items.image}
                                // variant='top'
                            />
                        </Link>

                        <Card.Body
                            as={motion.div}
                            key={Items._id}
                            initial='initial'
                            animate='in'
                            exit='out'
                            variants={containerVariants1}
                            transition={containerTransitions1}
                            className='card-content'
                        >
                            <Card.Title
                                as={motion.div}
                                key={Items._id}
                                initial='initial'
                                animate='in'
                                exit='out'
                                variants={containerVariants2}
                                transition={containerTransitions2}
                            >
                                <strong>{Items.title}</strong>
                            </Card.Title>

                            <Card.Text>
                                <motion.div
                                    key={Items._id}
                                    initial='initial'
                                    animate='in'
                                    exit='out'
                                    variants={containerVariants2}
                                    transition={containerTransitions2}
                                    className='card-content'
                                >
                                    {Items.description}
                                </motion.div>
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Link>
            </AnimatePresence>
        </>
    );
};

export default WorkItems;

单个项目页面

const containerVariants = {
    initial: {
        opacity: 0,
        y: '-80vw',
        scale: 0,
    },
    in: {
        opacity: 1,
        y: 0,
        scale: 1,
    },
    out: {
        opacity: 0,
        y: '80vw',
        scale: 0,
    },
};
const containerTransitions = {
    type: 'tween',
    ease: 'anticipate',
    duration: 2,
};

const unItems = ({ match }) => {
    const item = Items.find((p) => p._id === match.params.id);
    return (
        <>
            <AnimatePresence>
                <motion.div
                    initial='initial'
                    animate='in'
                    exit='out'
                    variants={containerVariants}
                    transition={containerTransitions}
                    className='portItem'
                >
                    <Image
                        className='image-container'
                        src={item.image}
                        alt={item.title}
                    />
                    <motion.div
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants}
                        transition={containerTransitions}
                        className='portItem'
                    >
                        <ListGroup variant='flush'>
                            <ListGroup.Item>
                                <h3>{item.title}</h3>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <h3>{item.blurb}</h3>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <h3>{item.description}</h3>
                            </ListGroup.Item>
                        </ListGroup>
                    </motion.div>

                    <motion.div
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants}
                        transition={containerTransitions}
                        className='portItem'
                    >
                        <ListGroup variant='flush'>
                            <ListGroup.Item>
                                <h3>{item.gitLink}</h3>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <h3>{item.hostLink}</h3>
                                <h3>{item.phoneQR}</h3>
                            </ListGroup.Item>
                        </ListGroup>
                    </motion.div>

                    <motion.div
                        initial='initial'
                        animate='in'
                        exit='out'
                        variants={containerVariants}
                        transition={containerTransitions}
                        className='portItem'
                    >
                        <ListGroup variant='flush'>
                            <ListGroup.Item>
                                <h3>{item.bIcon}</h3>
                            </ListGroup.Item>
                        </ListGroup>
                        <Link to='/work'>
                            <NButton>Go Back</NButton>
                        </Link>
                    </motion.div>
                </motion.div>
            </AnimatePresence>
        </>
    );
};

export default unItems;

Answer 1

AnimatePresence标签需要包装将从 DOM 中删除的元素。 您不能在条件渲染组件中包含标签，这看起来就像您在此处所拥有的一样。 在这种情况下， AnimatePresence标记会从包含组件的页面中删除，并且它永远没有机会运行退出 animation。

因此，您很可能只需将标签移动到父组件中。

此外，请确保您尝试使用AnimatePresence制作动画的所有组件都具有唯一的key道具。 在其中一些示例中，您似乎错过了这一点。