Why does my component immediately disappear?

[liveresume]

const TextField = (props) =>
  <Transition
    component={false}
    measure={false}
    enter={{
      opacity: 1,
    }}
    leave={{
      opacity: 0//spring(0, {...presets.gentle, precision: 1000}),
    }}>
    <TF {...props} />
  </Transition>

I see the animation when it is mounted, but not when it is unmounted.

[souporserious]

Sorry, I need to write better docs 😞 you should be able to do this:

const TextField = (props) =>
  <Transition
    component={false}
    measure={false}
    enter={{
      opacity: 1,
    }}
    leave={{
      opacity: 0//spring(0, {...presets.gentle, precision: 1000}),
    }}>
    { isMounted && // or whatever controls the mounting/unmounting
      <TF {...props} />
    }
  </Transition>

You can see similar functionality being used in the examples here.

[liveresume]

With this approach we must pass down an extra param and add boilerplate. Shouldn't it be possible for Transition to do this?

[souporserious]

You would need to do that anyways though right? Transition needs to somehow know when to show and hide your component. How are you imaging it working?

[liveresume]

I am thinking Transition could do something with its own componentWillUnmount()?

[souporserious]

Totally, but you still need to mount/unmount Transition yourself. Which you would then end up with something like:

{ isOpen &&
  <Transition>
    <div/>...
  </Transition>
}

Any way it happens, you will need to control mounting/unmounting yourself.

[liveresume]

Nice, that is exactly how I'm controlling Transition. But how do I solve the OQ? Transition needs a small upgrade right?

[souporserious]

Awesome. Just move your isOpen (or whatever mounts/unmounts your component), inside the Transition component. Nothing will be mounted if you have component={false} and nothing inside Transition.