0

Currently I'm working on React Weather app and I'm trying to animate input field from the middle of app to the top of the app. This animation should fire when Axios call will be full-filled. In this input field you are supposed to type name of the city, for which you want to know forecast.

When the city is found, this input field should move to the top of the App and all other information from api response should fade in from bottom. But first things first.

I've tried everything past 3 hours and I just can't make it done.

Declaring animation

  const [moveInput, setMoveInput] = useState(true)

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

I don't really know what numbers I have to insert in that from ,enter and leave variables. I've tried everything and it didn't even move.

Here is my axios call

  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);
  })

I guess with that setMoveInput function I'm able to fire this animation.

In render

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

input 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);
}

When i put SearchInput component inside that animated div it means that div is supposed to be animated.

Can please somebody please explain to me how is this working? I've tried to understand it from official documentation but there is no example like this case..

Thank you very much

Pinncik
  • 321
  • 3
  • 14

1 Answers1

0

If you want to move the same element, you should use the useSpring instead of useTransition. And if you translate the div with 50% then it will move it with 50% of the div height. So it will move it just a little bit. I recommend to use vh (viewport height) insted of %.

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

You should be aware also, that your css is on the inside of the div. You might want to add it to the animated div.

Here is my example: https://codesandbox.io/s/animate-search-between-top-and-center-jj4eh

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
  • it seems to be working for you but I dont really know why not for me.. I've copied exactly everything from your example and still its not working.. Can you please help me with it? – Pinncik Oct 13 '20 at 16:08
  • Maybe the problem is the absolute position of your input. It is not moving with your animated.div. Remove it from the css or try to remove all of the input css. – Peter Ambruzs Oct 13 '20 at 16:45
  • Now i see it works. But small problem is still here. The input is not exactly in the middle. It little bit over and closer to the bottom. do you know what can be the problem? – Pinncik Oct 14 '20 at 07:57
  • I have completely removed .search class and instead of 50vh i put 38vh. that is a middle of page for me. Everything's working for now. But i don't think it's right since 38vh logically cant be a middle – Pinncik Oct 14 '20 at 08:17
  • It is very hard to advise without seeing your whole code. I recommend to look up absolute and relative positioning. And also if you don't wanna put more time to this problem then leave it as is if it works. – Peter Ambruzs Oct 14 '20 at 08:26
  • anyways, thank you for your time and helping me out with this :) – Pinncik Oct 14 '20 at 08:44