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

Question

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

我遇到的第一个问题是保证金没有变化。我不知道这是否是 auto 关键字的问题，但搜索栏在动画之前居中，并且没有改变。

第二个问题是，当我调整 window 大小时，搜索栏的 top 值和 width 值（以 vw 和 vw 为单位vh) 在刷新页面或搜索栏重新获得焦点之前不要更新。

我已经链接了我的代码 here

我需要在 window resize 上制作应用程序 auto-refresh 才能解决这个问题吗？

Answer 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

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

React-spring useSpring() prevents viewport size from updating when window is resized

javascript

css

reactjs

react-spring