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

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.

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

Here's my code:

<TransitionGroup ponent={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;
    }
}

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

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.

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

Here's my code:

<TransitionGroup ponent={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;
    }
}

• javascript
• reactjs
• animation
• css-animations
• react-transition-group

Share Improve this question Follow asked May 15, 2019 at 22:24 mheaversmheavers 30.2k6363 gold badges200200 silver badges326326 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

This is a bit of a hack, but in case it helps anyone else, I solved this by shortening the transition in, and putting the animation on the "end" state:

//JSX
<CSSTransition 
    classNames="anim_mobile_selectors" 
    timeout={{
        enter: 100,
        exit: 500,
    }}
><div>...</div>
</CSSTransition>



//CSS
    .anim_mobile_selectors {
        &-enter {
            opacity: 0.01;
        }
        &-enter-active {
            opacity: 0.01;
        }
         &-enter-done {
            opacity:1; 
            transition: opacity 500ms linear;
        }
        &-exit {
            opacity:1;
        }
        &-exit-active {
            opacity: 0.01;
            transition: opacity 500ms linear;
        }
    }