如何使用 React 为输入字段设置动画 spring

Question

目前我正在开发 React Weather 应用程序，我正在尝试为从应用程序中间到应用程序顶部的输入字段设置动画。这个动画应该在 Axios 调用被充满时触发。在此输入字段中，您应该输入您想要了解天气预报的城市名称。

找到城市后，此输入字段应移至应用程序顶部，api 响应中的所有其他信息应从底部淡入淡出。但要事第一。

过去 3 小时我已经尝试了所有方法，但就是无法完成。

声明动画

  const [moveInput, setMoveInput] = useState(true)

  const inputTransitions = useTransition(moveInput, null, {
    from: { transform: 'translateY(-50%)' },
    enter: { transform: 'translateY(100)' },
    leave: { transform: 'translateY(-100%)' },
  })

我真的不知道我必须在 from、enter 和 leave 变量中插入什么数字。我什么都试过了，还是不动。

这是我的 axios 调用

  axios.get(
    `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely&units=metric&appid=${apiKey}`
  ).then(response => {
    //Push results to state
    setForecast(prevState => ({
      ...prevState,
      week:response.data.daily,
      humidity: response.data.current.humidity+'%'
    }))

    setMoveInput(false);
  })

我想我可以使用 setMoveInput 函数触发这个动画。

渲染中

{inputTransitions.map(({ item, key, props }) =>
            item && <animated.div
                         key={key} 
                         style={props}
                         >  
                                <SearchForm 
                                  searchCity={searchCity} 
                                />
                         </animated.div>
            )}

输入css

input{
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

当我将 SearchInput 组件放入动画 div 时，这意味着 div 应该是动画的。

有人可以向我解释一下这是怎么回事吗？我试图从官方文档中理解它，但没有像这种情况这样的例子..

非常感谢

Answer 1

如果你想移动相同的元素，你应该使用useSpring而不是useTransition。如果您将 div 平移 50%，那么它将移动 div 高度的 50%。所以它只会移动一点点。我建议使用 vh（视口高度）代替 %.

  const props = useSpring({
    transform: moveInput ? "translateY(50vh)" : "translateY(1vh)"
  });

您还应该知道，您的 css 在 div 的内侧。您可能希望将其添加到动画 div.

这是我的例子： https://codesandbox.io/s/animate-search-between-top-and-center-jj4eh

如何使用 React 为输入字段设置动画 spring

How to animate input field using React spring

javascript

reactjs

transition

react-transition-group

react-spring