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

问题描述

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

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

第二个问题是，当我调整窗口大小时，搜索栏的top值和值（以和width为单位）在页面刷新或搜索栏重新聚焦之前不会更新。vwvh

我需要打开应用程序auto-refresh来window resize解决这个问题吗？

标签： javascriptcssreactjsreact-spring

对于第一部分，尝试使用除之外的其他居中方法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

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

问题描述

解决方案

推荐阅读