React-spring: Transition "leave" not fired/animating

Created on 14 Jun 2018 · 1Comment · Source: pmndrs/react-spring

Hi, I have a component which mounts on a specific state. I'm using Transition and "from" + "enter" animations are working fine. But when the component unmounts "leave" doesn't seem to get fired. Look like the components get's unmounted before it would hit "leave".

Example: https://codesandbox.io/s/3qpqr15yq1 - click on "toggle" button to see mount and unmount.

Thanks for your time!

Source

kkarkos

Most helpful comment

@kkarkos you're wrapping the entire thing into a ternary ;-) That means the transition itself vanishes. Do it like this:

<React.Fragment>
  <ul>
    <Transition
      keys={this.state.items}
      from={{ opacity: 0, height: 0 }}
      enter={{ opacity: 1, height: 100 }}
      leave={{ opacity: 0, height: 0 }}>
      {this.state.show && (styles => <li style={{ ...defaultStyles, ...styles }}>TEST</li>)}
    </Transition>
  </ul>
  <button onClick={this.toggleShow}>Toggle</button>
</React.Fragment>

Think of Transition as something that can track its own children, thereby retaining them when they unmount.

drcmda on 14 Jun 2018

👍4

>All comments

@kkarkos you're wrapping the entire thing into a ternary ;-) That means the transition itself vanishes. Do it like this:

<React.Fragment>
  <ul>
    <Transition
      keys={this.state.items}
      from={{ opacity: 0, height: 0 }}
      enter={{ opacity: 1, height: 100 }}
      leave={{ opacity: 0, height: 0 }}>
      {this.state.show && (styles => <li style={{ ...defaultStyles, ...styles }}>TEST</li>)}
    </Transition>
  </ul>
  <button onClick={this.toggleShow}>Toggle</button>
</React.Fragment>

Think of Transition as something that can track its own children, thereby retaining them when they unmount.

drcmda on 14 Jun 2018

👍4

Was this page helpful?

0 / 5 - 0 ratings