Reactjs 基于媒体查询的Spring动画/转换

我已经很好地完成了这个春季过渡：

const Nav = () => {

  const[showMenu, setShowMenu] = useState(false)

  const navbgTransitions = useTransition(showMenu, null, {

      //FROM
      from: { 
        opacity: 1, position:'absolute', transform: 'translateX(225px)', 
      },

      //ENTER
      enter: { 
        opacity: 1, transform: 'translateX(0)'
      },

      //LEAVE
      leave: item => async (next, cancel) => {
        await new Promise(resolve => setTimeout(resolve, 500));
        await next({ opacity: 1, transform: 'translateX(225px)' })
      },
      
  })

})


return (
      <>
          {
            navbgTransitions.map(({ item, key, props }) =>
              item && 
              <animated.div key={key} style={props} className="background">
                <ul>
                    <Link onClick={() => setShowMenu(false)} to="/" exact><li>Home</li></Link>
                    <Link onClick={() => setShowMenu(false)} to="/about"><li>About</li></Link>
                    <Link onClick={() => setShowMenu(false)} to="/work"><li>Work</li></Link>
                    <Link onClick={() => setShowMenu(false)} to="/hire"><li>Hire Me</li></Link>
                </ul>
              </animated.div>
            )
          }

      </>
  );

export default Nav;

const Nav=（）=>{
常量[showMenu，setShowMenu]=useState（false）
常量navbgTransitions=useTransition（显示菜单，空{
//从
发件人：{
不透明度：1，位置：“绝对”，变换：“translateX（225px）”，
},
//进入
输入：{
不透明度：1，变换：'translateX（0）'
},
//离开
离开：项目=>async（下一步，取消）=>{
等待新的承诺（resolve=>setTimeout（resolve，500））；
等待下一步（{opacity:1，transform:'translateX（225px）}）
},
})
})
返回(
{
映射（{item，key，props}）=>
项目&&

设置ShowMenu（false）}至=“/”精确>
主页
setShowMenu（false）}to=“/about”>
关于
setShowMenu（false）}to=“/work”>
工作
setShowMenu（false）}to=“/hire”>
雇用我

)
}
);
导出默认导航；

我已经决定，我真的希望动画在更小的设备上以不同的方式工作。我想知道，是否有一种方法可以复制

const navbg transitions

，然后围绕它们包装单独的React media查询，并根据视口宽度设置from、enter和leave动画以不同方式播放

根据我对React/Javascript的理解，我已经做了尽可能多的研究，目前我很想切换到

React过渡组

，因为（从我所读到的）这允许基于样式表的动画

我是一个新的反应，所以一点点的指导将不胜感激

是，可用于相应地确定视口宽度

const matches = useMediaQuery('(min-width:600px)');

然后，可以在您定义的状态中使用匹配项进行转换，例如，在移动设备上使用translateY而不是translateX（或您希望它为您做的任何事情）

是，可用于相应地确定视口宽度

const matches = useMediaQuery('(min-width:600px)');

然后，可以在您定义的状态中使用匹配项进行转换，例如，在移动设备上使用translateY而不是translateX（或您希望它为您做的任何事情）