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

Question

目前我正在开发 React Weather 应用程序，我正在尝试将输入字段从应用程序的中间动画化到应用程序的顶部。当 Axios 调用被填满时，这个动画应该会触发。在此输入字段中，您应该输入您想知道预测的城市名称。

找到城市后，此输入字段应移至 App 顶部，来自 api 响应的所有其他信息应从底部淡入。但首先要做的事情。

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

声明动画

  const [moveInput, setMoveInput] = useState(true)

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

我真的不知道我必须在其中插入什么数字，输入和离开变量。我已经尝试了一切，它甚至没有动。

这是我的 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