3

I'm trying to use React's TransitionGroup and Transition elements to implement the basic case of having my elements 'animate' in and out. I'm confused about the proper way to utilize the Entering, Entered, Exiting, Exited state as well as additional concerns like unmountOnExit (which seems to prevent Exited state from being reached).

I'm using these styles right now:

.Test {
    transition: background-color 1000ms ease-in-out;
    background-color: white;
}

.entering {
    background-color: white;    
}

.entered {
    background-color: purple;
}


.exiting {
    background-color: purple;
}

.exited {
    background-color: white;
}

That are applied to a div like so:

<Transition unmountOnExit={true} in={this.props.in} timeout={1000}>
                {state => {
                    console.log(this.props.name);
                    console.log(state);
                    return (
                        <div className={`Test ${state}`}>
                            {this.props.name}
                        </div>
                    );
                }}
</Transition>

What happens is the div appears with a white background (waits for timeout amount of time) then fades to purple. If I delete this div, it waits timeout (doing nothing) and then instantly disappears.

I'm confused with the number of possible state combinations in this API. exiting, timeout, unmountOnExit, the CSS classes and how the animations are applied. etc..

Question

So I guess my question is (and i can provide more of my code if more context is needed) how can I simply implement something like "fade in, fade out", where the component's addition to the DOM and removal (hopefully corresponding to React's componentDidMount componentWillUnmount?) will line up with sensible animations.

One approach I took was to set the timeout prop to 0. That made it so that I could set Entering and Entered to background-color: purple and since the initial state was Exited (which i set to background-color: white it would "fade in" (to purple) on mount. But then the problem is that since timeout is 0, the reverse Transition states (which I guess was entered -> exiting -> exited) happened instantaneously and then the component is unmounted. So you don't even see the "fade out" portion of the transition.

Community
  • 1
  • 1
Alex Bollbach
  • 4,370
  • 9
  • 32
  • 80
  • Could you try getting an example working on Code Sandbox? Try building off of this example: https://codesandbox.io/s/oljq9mymnq The `timeout` variable is just the amount of time it takes to swap from the `entering` and `entered` state, then `exiting` and `exit`. If you set it to 0, it will have no time to transition before umounting. It's up to you to create styles that line up properly with the state transitions. – Adam Nov 16 '17 at 17:51
  • lets call two state "out" and "in", where "out" corresponds to say opacity:0 and "in" corresponds to opacity:1, what i don't get is how "out" and "in" correspond to entering/entered and exiting/exit. for one thing its 4 states but i only care about 2 in this basic example. so is it entering=>"out", entered=>"in", existing=>"in", exited=>"out"? – Alex Bollbach Nov 17 '17 at 15:52
  • Think about unmounting/exiting though. In terms of styling, you don't want the component to unmount immediately, because if you unmount, your component doesn't have time to the finish the animation. That's the point of `exiting`, to let the animation run, before actually unmounting the component. When you set `in` to `false`, it doesn't unmount immediately, it sets the state to `exiting`, waits `timeout` milliseconds, then sets the state to `exited` and then unmounts the component. – Adam Nov 17 '17 at 22:27
  • That's why if you set `timeout` to `0`, it disappears right away. The animation doesn't have time to run before the component is unmounted. That's the purpose of the `exiting` state, is to tell you components 'begin your animation now, because the component will be unmounting soon'. Same for `entering`, it's saying, 'the component has been told to appear, start fading in now'. – Adam Nov 17 '17 at 22:29
  • Check out this example, it uses CSSTransition instead, which is probably better suited for your use-case: https://codesandbox.io/embed/kw8z6pp9zo `fade-enter` is applied when the state is `entering` or `entered`, and `fade-enter-active` is only applied when `entering`, which is better suited for CSS transitions. – Adam Nov 17 '17 at 22:56
  • i'd prefer to use the lower level component that simply gives me the hooks as i plan on controlling things beyond css. as for your comment ~"..entering is saying the component has been told to appear start fading in.." when i add the Transition to the Transition group i see these status in order, "exited componentDidMount entering entered" so if i placed the opacity:1 on "entering" in that case, there's nothing to animate from. – Alex Bollbach Nov 18 '17 at 01:53
  • i feel like i've learned a lot of complex things about react/redux but confusingly can't grok this API. so i'm calling shenanigans! i should be able to get this by now. – Alex Bollbach Nov 18 '17 at 01:58
  • i WAS able to get the fading in / fading out behavior by awkwardly (at least it feels that way to me) setting up the classes (in / out state) and using the timeout prop ``. which adds the corresponding css classes (notice how there is an asymmetry in both the timeout prop and the entering/ed exiting/ed classes - https://gist.github.com/AlexanderBollbach/b68cc30d09e27d392454064e6389636a – Alex Bollbach Nov 18 '17 at 01:58

0 Answers0