React-spring useSpring() 防止在调整窗口大小时更新视口大小答案

【问题标题】：React-spring useSpring() prevents viewport size from updating when window is resizedReact-spring useSpring() 防止在调整窗口大小时更新视口大小
【发布时间】：2020-08-02 20:02:35
【问题描述】：

我使用 react-spring 的 useSpring() 制作了一个带有搜索栏的简单动画。当处于焦点时，我希望搜索栏更改width，将其margin 更改为0，并将其top 值更改为0。

我遇到的第一个问题是边距没有变化。不知道是不是auto关键字的问题，但是搜索栏在动画之前居中，没有变化。

第二个问题是，当我调整窗口大小时，搜索栏的top 值和width 值（以vw 和vh 为单位）不会更新，直到页面刷新，或搜索栏重新成为焦点。

我已经链接了我的代码here

我需要在window resize 上创建应用程序auto-refresh 来解决这个问题吗？

【问题讨论】：

标签： javascript css reactjs react-spring

【解决方案1】：

对于第一部分，尝试使用除margin: auto 之外的其他居中方法。例如，使用left: 50%; transform: translateX(-50%) 的组合，您还可以将您的组件居中。并且 react-spring 可以使用这个值进行插值。

第二部分。尝试使用视口单位而不是像素。喜欢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

【讨论】：