Анимации / переходы React Spring на основе медиа-запросов

У меня этот переход 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, поэтому буду очень признателен!


reactjs react-spring media-queries
person DesignAaron    schedule 26.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, useMediaQuery из Material-ui можно использовать для определения ширины области просмотра. соответственно,

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

затем совпадения могут использоваться в ваших определенных состояниях для перехода, например, к использованию translateY на мобильных устройствах вместо translateX (или того, что вы хотите, чтобы он делал для вас),

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