React-spring useSpring () предотвращает обновление размера области просмотра при изменении размера окна - PullRequest
Новая
       20

React-spring useSpring () предотвращает обновление размера области просмотра при изменении размера окна

0 голосов
/ 20 апреля 2020

Я сделал простую анимацию с панелью поиска, используя useSpring() реагирующей пружины. Когда я нахожусь в фокусе, я хочу, чтобы строка поиска изменила width, изменила margin на 0 и изменила значение top на 0.

Первая проблема, с которой я столкнулся, заключается в том, что маржа не меняется. Я не знаю, является ли это проблемой с ключевым словом auto, но строка поиска располагается по центру перед анимацией и не меняется.

Вторая проблема заключается в том, что при изменении размера окна top значение и width значение панели поиска (в единицах vw и vh) не обновляются до тех пор, пока страница не будет обновлена ​​или панель поиска не вернется в фокус.

Я связал свой код здесь

Нужно ли мне сделать приложение auto-refresh на window resize, чтобы это исправить?

1 Ответ

0 голосов
/ 21 апреля 2020

Для первой части попробуйте использовать метод центрирования, отличный от margin: auto. Например, с помощью комбинации left: 50%; transform: translateX(-50%) вы также можете центрировать свой компонент. И реагирующая пружина может интерполировать с этими значениями.

Для второй части. Попробуйте использовать единицы просмотра вместо пикселей. Например vw и vh.

Примерно так: 

  const props = useSpring({
    top: focused ? `0px` : `${0.29 * window.innerHeight - 35}px`,
    width: focused
      ? `80vw`
      : `50vw`,
    margin: '10px',
    left: focused ? '40%' : '50%',
    transform: 'translateX(-50%)',
    config: { velocity: 4, mass: 1.8 }
  });

Полный пример: https://codesandbox.io/s/react-spring-browser-resizing-mm7d1

...