基于媒体查询的 React Spring animations/transitions

Question

我的 React 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 navbgTransitions，然后围绕它们包装单独的 React 媒体查询，并根据视口宽度设置 from、enter 和 leave 动画以不同方式播放？

我已经根据我对 React/Javascript 的理解做了尽可能多的研究，目前我很想切换到 react-transition-group 因为（根据我读过的内容) 这允许基于样式表的动画。

我是 React 的新手，非常感谢您提供一些指导！

Answer 1

是的，useMediaQuery from Material-ui可用于相应地确定视口宽度，

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

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

from: { 
        opacity: 1, 
        position:'absolute', 
        transform: matches ? 'translateX(225px)' : 'translateY(50px)', 
      },

基于媒体查询的 React Spring animations/transitions

Media query based React Spring animations/transitions

media-queries

reactjs

react-spring