0

我正在我的网站上创建一个功能，当您滚动经过某个 div 元素（即不再在视图中，使用react-intersection-observer）时，另一个元素会在其中动画（使用framer-motion useAnimation()钩子）

我在 nextjs 工作，页面是服务器端渲染的

const topViewVariants = {
  hide: {
    y: "-100%",
  },
  show: {
    y: "0",
  },
};

const TopView = ({ inView }: { inView: boolean }) => {
  const controls = useAnimation();
  useEffect(() => {
    if (inView) {
      controls.start("hide");
    } else {
      controls.start("show");
    }
  }, [inView, controls]);
  return (
    <MotionMyBox
      variants={topViewVariants}
      animate={controls}
      initial="hide"
      position="fixed"
      top="0"
      w="100%"
      zIndex="30"
      display={{
        base: "block",
        md: "none",
      }}
    >
      <HStack p="4">
        <MyImage
          src="/images/home/header/4.jpg"
          alt=""
          boxSize={{
            base: "20",
            md: "20",
            lg: "20",
          }}
          quality=""
        />
        <VStack
          alignSelf="start"
          justifyItems="start"
          alignItems="start"
          spacing="1"
        >
          <Heading
            textTransform="uppercase"
            fontWeight="thin"
            fontSize="lg"
            display="inline-flex"
            justifyContent="center"
            w="100%"
          >
            xtreme torpe
            <Badge colorScheme="red" alignSelf="start" ml="2">
              E
            </Badge>
          </Heading>
          <Text fontSize="sm" fontWeight="semibold">
            {dayjs(new Date()).format("h:mm A, dddd MMMM D")}
          </Text>
          <Text fontStyle="italic" fontSize="xs" opacity="0.8">
            Hosted by Damien
          </Text>
        </VStack>
      </HStack>
    </MotionMyBox>
  );
};

const Event = ({}: Party) => {
    const [infoRef, infoInView] = useInView({
    threshold: 0,
  });
   return (
     <TopView inView={infoInView} />
     <div ref={infoRef}></div>
   )
}

我还使用了一个名为的 UI 库chakra-ui

我真的没有得到这个错误，因为逻辑很简单，如果<div>在视图中然后开始这个动画。

4

0 回答 0