React Spring Transition not working properly

Question

So I've looked at the react springs docs, and I'm sure I'm just not understanding it properly. But I wanted to essentially try to make a div have an enter animation and some kind of trigger to make it leave

I have been unsuccessful in triggering this leave. I can't seem to understand what makes it trigger the leave functionality. Or maybe I'm just not understanding the transition in general which is entirely possible.

The idea is simple, I want to be able to trigger something to come into view, and then when something else happens, to trigger it to go out of view.

I took an example from the react-spring docs, and made my own fork, to demonstrate what I seem to be misunderstanding.

If you go to this codepen, and click anywhere in the display box, you'll notice some animation happening. From my understanding, the state variable isTrue should be telling the transition what state to be in. So if it's false, I would assume this would trigger leave. But it doesnt leave, as you can see from the example, it stays at the enter rule (display being block and opacity being 1).

Essentially, I'd want it to come into view initially, and when i click on it, to trigger the leave rule and have it animate out to display none and opacity 0.

Any help is appreciated.

Peter Ambruzs Peter Ambruzs · Accepted Answer · 2020-12-13T06:57:44

Transition basic function is for displaying the content of an array. If you manipulate the array the transition will follow. You can add, insert and delete elements and react spring will take care the animation of each item.

When you use transition to switch on/of a single item with a boolean value. You have to modify your render method to add an extra condition ( item &&) in front of your component. As you can see in the last example here: https://www.react-spring.io/docs/hooks/use-transition

  {transitions.map(({ item, props, key }) => {
    const Page = pages[0]
    return item && <Page key={key} style={props} />
  })}

This is the modified code: https://codesandbox.io/s/xenodochial-buck-k40bj

React Spring Transition not working properly

1 Answers