Transition for display

[WebDeg-Brian]

Hi, I have an image carousel. I want each time a slide enters (display: block | flex | etc.) it triggers the entering animation, and whenever it leaves (display: none) it triggers the leaving animation. How do I do that? Spent hours digging in the documentation but haven't found it yet. Thanks in advance :)

Edit I'm currently using react-swipeable-views, and I don't know how to implement it with react-spring.

[ruggedy]

@WebDeg-Brian merry christmas. please can you make a codesandbox that I can take a look at?

[WebDeg-Brian]

@ruggedy Sure, here you go: https://codesandbox.io/s/m5zzj3l25p. Again, the question is: How do I implement react-spring with it?

[Jessidhia]

react-spring, like react-transition-group, does transitions based on components being actually mounted/unmounted inside the Transition(Group) instead of based on a state change 🤔

It's not impossible to implement it as a reaction to a change in a property of the data but it's going to be working against a lot of how Transition works internally.

[WebDeg-Brian]

@Kovensky perhaps this API could work:

<Animation from={{ opacity: 0 }} enter={{ opacity: 1 }} leave={{ opacity: 0 }} />

"Animation" is used here instead of "Transition" because that's how CSS animation works: Re-run everytime the component enters (change from display: none to whatever it's supposed to be)

[Jessidhia]

That's exactly how the Transition API works, only you have to forward the animated object with { opacity } yourself with the render prop.

What is different / confusing you I think is what counts as entering. What counts as entering is not a change in display, it's the presence of the element itself.

[WebDeg-Brian]

So, back to the question, how can make react-spring play nicely with react-swipeable-views? @Kovensky Edit I tried reset but it doesn't seem to work. I can make a pull request if that's reasonable

[drcmda]

Like @Kovensky said, Transitions watch mount/unmount state. You want to swipe between cards being both visible at the time, i would do that with a couple of springs instead where you can control yourself when and how they're visible. Theoretically a transition could do it using function expressions, where you can drive how enter/leave/update work with code instead of raw configs:

leave={item => async next => {
  await next({ opacity: 0, ... })
  await next({ display: 'none' })
}}

Here's a complex example using this: http://react-spring.surge.sh/transition (scroll way down, the last example "notifications"). The code is here: https://github.com/react-spring/react-spring/blob/master/examples/demos/messages/index.js

This example steers the unmount/leave itself. It doesn't let the item go away until its lifespan has concluded (the blue line going from left to right). The real item in state has been removed by then long ago, but transition keeps the view around until the leave function signals its end (await next({ config }, true))