React-spring: Using Transition for a single element (toggling visibility) that has props

[thislogancall]

CodeSandbox: https://codesandbox.io/s/0vpx6n11ov

If you delve into the select field code you'll see a Transition component commented out. As it's "children" prop is a function, I thought I'd be able to use that to forward the styles onto an element once it's open. However, that doesn't seem to work and appears to be related to their being no keys (because there's only one item). I'm not sure if this is a bug or my lack of understanding on how to properly do this. The Readme shows an example of toggling a single component with Transition, but I need the component being toggled to receive certain props.

[drcmda]

@thislogancall i don't quite understand the code, transition normally receives a function or an array of functions. This one seems to receive a function that statically has an animated.div, which then maps over children (i assume you want these children to fade in and out), also styles aren't applied anywhere.

If you use native primitives (, < Transition native />, etc) then then element that receives styles has to be animated.[elementName]. In your case it looks like you want the styled-component to receive styles. That is possible:

import { animated } from 'react-spring'

const Container = styled('div')(() => ({ ... }))

export default animated(Container)

Of course that component has to receive the styles you pass somewhere.

[thislogancall]

@drcmda Sorry, my original comment wasn't clear.

I want to animate the component tree from <animated.div... and below based on the isOpen state. I don't need the children below to animate one at a time, I just want that wrapping component to animate on and off based on the user opening/closing the select field options.

Your current Transition examples include mapping over multiple items, or toggling a single component (without calling it). Neither of these work in my case b/c I need to toggle a single component but that's components children need props from the containing class.

style={styles} has been added, it was there but got removed before I submitted the issue somewhere in the debugging process.

[thislogancall]

Here is a simpler example where i'm trying to do the same thing...

<Transition
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}
        >
          {styles =>
            isActive && (
              <animated.div style={styles}>
                <span className="triangle" />
                <ul>{children}</ul>
              </animated.div>
            )
          }
        </Transition>

[drcmda]

Can’t try it atm but the isActive has to be first in line, before styles => . Otherwise you won’t see a fadeout since you’re taking away the elements content. Transition tracks its direct children, in your case that’s the function you provide, when its gone then transition will retain it and fade it out.

[drcmda]

@thislogancall did you figure it out?