next.js 帧运动：不同的动画为移动的和桌面

qkf9rpyu 于 12个月前发布在其他

关注(0)|答案(1)|浏览(110)

尝试在移动的或桌面上制作不同的动画，为此，我使用了useMediaQueryHook并更改了它的功能变体。但init动画似乎总是假设我在桌面上。我猜是因为useMediaQueryHook在anim启动之前没有时间实现。我如何处理这个问题？
顺便说一句，我在nextjs：）
下面是我的代码：

const onMobile = useMediaQuery("(min-width : 428px)");

  const wishCardVariant = {
    hidden: (onMobile) => ({
      opacity: 0,
      y: onMobile ? "100%" : 0,
      x: onMobile ? 0 : "100%",
      transition,
    }),
    visible: (onMobile) => ({
      opacity: 1,
      x: 0,
      y: 0,
    }),
  };

字符串
这里是hook：

import react, { useState, useEffect } from "react";

export default function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => {
      setMatches(media.matches);
    };
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);

  return matches;
}

型

next.js

来源：https://stackoverflow.com/questions/74823143/framer-motion-different-animation-for-mobile-and-desktop

1条答案

按热度按时间

s71maibg1#

你可以尝试使用useLayoutEffect。我有一个类似的问题，我想根据设备类型应用不同的风格，这对我很有效

export default function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false)

  useLayoutEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => {
      setMatches(media.matches)
    }
    media.addEventListener('change', listener)
    return () => media.removeEventListener('change', listener)
  }, [matches, query])

  return matches
}

字符串

赞(0）回复(0）举报 12个月前

我来回答

next.js 帧运动：不同的动画为移动的和桌面

1条答案

相关问题

热门标签

最新问答