reactjs 组件位于视口中之前InView激活时的框架运动

toe95027  于 2023-01-17  发布在  React
关注(0)|答案(1)|浏览(190)

我正在尝试用Framer Motion制作一个简单的动画,其中一个组件从左边开始浮动并变为不透明。这个组件就在英雄部分的正下方,但在页面顶部时不显示在视口中(英雄部分是整个视口的高度)。组件在一个独立的div中而不是英雄部分。注意,如果这与此有关,我正在使用脉轮UI。我将它 Package 在motion.div元素中,如下所示:

<motion.div     
        initial={{ x: -400, opacity: 0}}
        whileInView={{ x: 0, opacity: 1}}
        transition={{ duration: 3 }}
        viewport={{ once: true }}
        >
        <Box alignContent='right' id='about'>
            <Flex>
                <Spacer />
                    <VStack>
                        <Heading>Some heading</Heading>
                        <Text>
                            Some Text
                        </Text>
                    </VStack>
                <Spacer />
            </Flex>
        </Box>
    </motion.div>

动画在组件进入视区之前就开始了。我知道动画正在工作,因为当我在页面加载后快速滚动时,我看到它完成了一半。然而,如果我离开它几秒钟,然后向下滚动,动画就已经完成了。
我是新来的框架议案,只是按照例子。请让我知道,如果你看到我的错误。谢谢!

icnyk63a

icnyk63a1#

另一种方法是使用“useInView”钩子。你可以为你的元素定义一个ref,并使用该ref作为钩子的参数,这样它将观察该元素。
you can see the examples from here

相关问题