如何使用React spring

问题描述

当前，我正在开发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%)' },})

我真的不知道我必须从中插入什么数字，然后输入并留下变量。我已经尝试了一切，甚至都没有动。

这是我的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%,0);
    transform: translate3d(-50%,0);
}

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

请问有人可以告诉我这是如何工作的吗？我试图从官方文档中了解它，但是没有像这样的例子。

非常感谢您

解决方法

如果要移动相同的元素，则应使用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