基于媒体查询的 React Spring 动画/过渡答案

【问题标题】：Media query based React Spring animations/transitions基于媒体查询的 React Spring 动画/过渡
【发布时间】：2020-10-03 17:09:21
【问题描述】：

我的这个 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 媒体查询，并根据视口宽度设置从、进入和离开动画以不同方式播放？

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

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

【问题讨论】：

标签： reactjs media-queries react-spring

【解决方案1】：

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

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

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

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

【讨论】：