CODEWITHSUNDEEP
javascriptcssreactjs
Eric Taw
Eric Taw

Reputation: 321

ReactCSSTransitionGroup does not activate transition

ReactCSSTransitionGroup does nothing for me, other than delay the element I want to display. I am trying to get my component to fade in upon page load. Here is the code in question:

import React from 'react';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';

...

render() {
    if(this.state.mounted) {
        var child = (
            <div>
                <h1>{this.state.title}</h1>
                <p>Description: {this.state.description}</p>
                <p>Language(s): {this.state.lang}</p>
            </div>
        );
    }
    else {
        var child = null;
    }
    return (
        <div className="container">
            <ReactCSSTransitionGroup transitionAppear={true} transitionAppearTimeout={1000} transitionName="puzzle" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
                {child}
            </ReactCSSTransitionGroup>
        </div>
    )
}

And here is the CSS written in SASS:

.puzzle-appear {
    opacity: .01;
    .puzzle-appear-active {
        opacity: 1;
        transition: opacity 1000ms ease-in;
    };
};

.puzzle-enter {
    opacity: .01;
    .puzzle-enter-active {
        opacity: 1;
        transition: opacity 500ms ease-in;
    };
};

.puzzle-leave {
    opacity: 1;
    .puzzle-leave-active {
        opacity: .01;
        transition: opacity 300ms ease-in;
    };
};

I've tried a number of things that Google offered, but nothing has worked. Yet, everything seems to be in order. What is wrong with the code?

Upvotes: 0

Views: 150

Answers (1)

Jamie Dixon
Jamie Dixon

Reputation: 53991

You SASS code is suggesting that the active state classes are applied to an element inside your puzzle element but I don't think that's the case.

If you can see the classes being applied when you render and that bit is working fine, then this is probably the issue. Move the -active styles out of their current nested position.

Upvotes: 1

Related Questions