React-transition-group: react transition group appear transitions not working properly

[heaversm]

I'm using [eact transition group to handle animated CSSTransitions when a component is rendered. I want a simple fade in of a component.

The transition out seems to work properly, but the in transition does not.

If I put a debugger on the onEnter property, I can see that the transition actually "should" work as expected. The enter-active state is triggered, the element starts at 0.1 opacity, and if I resume the debugger, the transition takes place to full opacity.

But without the debugger, when the component renders, even though the enter-active state is added to the component, it is just immediately visible - no opacity fade in occurs.

Here's my code:

    <TransitionGroup component={null}>
    {mobileSelectorsActive && 
    <CSSTransition 
        classNames="anim_mobile_selectors" 
        timeout={5000}
        //appear={true}
        //mountOnEnter={true}
        onEnter={()=>{
            //debugger;
        }}
    >
    <div>...</div>
    </CSSTransition>
    }
    </TransitionGroup>

and the CSS:

    .anim_mobile_selectors {
        &-enter {
            opacity: 0.1;
            transition: opacity 5000ms linear;
        }
        &-enter-active, &-enter-done {
            opacity:1; 
        }
        &-exit {
            opacity:1;
        }
        &-exit-active {
            opacity: 0.1;
            transition: opacity 5000ms linear;
        }
    }

[taion]

take a look at the example in https://reactcommunity.org/react-transition-group/css-transition

you have your CSS set up incorrectly

[afreeland]

@taion I feel like I am seeing this same issue...what is incorrect in the above css? After processing it would look like:

.anim_mobile_selectors-enter {
  opacity: 0.1;
  transition: opacity 5000ms linear;
}

.anim_mobile_selectors-enter-active, .anim_mobile_selectors-enter-done {
  opacity: 1;
}

.anim_mobile_selectors-exit {
  opacity: 1;
}

.anim_mobile_selectors-exit-active {
  opacity: 0.1;
  transition: opacity 5000ms linear;
}

Which looks like several examples I have seen, I feel like I keep skipping over what is incorrect. I have a similar setup and animations just _happen_ they dont seem to actually _transition_.

[afreeland]

Was revisiting my issue today and discovered the problem and figured I would share if it saved anyone else time. The framework we use also had applied a transition to the element and it was taking precedence over the ones add by CSSTransition. So that is why the animations looked/felt terrible, like they weren't even happening. Well, its b/c they weren't...the framework was using transition for a background-color and hijacking the whole attribute.

Was able to merge the frameworks transition in with the one I was creating for CSSTransition and 💥

Hope this helps others =)

[UiCandy]

@afreeland Thanks for the tip, was baffled why it wasn't working, rebass's sx prop likely is the culprit. 😅

[an-object-is-a]

Was revisiting my issue today and discovered the problem and figured I would share if it saved anyone else time. The framework we use also had applied a transition to the element and it was taking precedence over the ones add by CSSTransition. So that is why the animations looked/felt terrible, like they weren't even happening. Well, its b/c they weren't...the framework was using transition for a background-color and hijacking the whole attribute.

Was able to merge the frameworks transition in with the one I was creating for CSSTransition and 💥

Hope this helps others =)

This solved my problem.
I had a 'transitionDuration' being set in the render of the component on my landing page. Taking that line out fixed the problem.
Also, I added the 'in' and 'appear' props.
Thanks.