ReactCSSTransitionGroup rendering list of items

Question

So I am trying to display a transition with ReactCSSTransitionGroup on load of the home page. It is to display a list of items below the jumbotron. This items come from Redux store. They are passed from a container component called home_index.js that is aware of Redux Store. The component itself 'poll-list.js' contains poll-links, the items to be transitioned in; it (and its child) is a DUMB component. Meaning, it has no state nor is it aware of redux store. (Can these components even use ReactCSSTransitionGroup?)

In any case, I cannot, for the life of me, get this fade in transition to work. I know I must be doing something wrong...but cannot figure it out.

    const appearTransition = {
    transitionName: "fade",
    transitionLeave: false,
    transitionEnter: false,
    transitionAppear: true,
    transitionAppearTimeout: 2500
};

let polls;
if (props.pollsList) {
    polls = props.pollsList.map((poll, ind) => {
        return (
                <PollLink
                className='poll-link'
                title={poll.title} 
                index={ind}
                id={poll.id} 
                key={ind}
                />
        )
    });
}
return (
    <div className='poll-list'>
        <ReactCSSTransitionGroup {...appearTransition}>
        {props.pollsList.length > 0 ? polls : null}
        </ReactCSSTransitionGroup>
    </div>
)

}

And here is the CSS (note I am not doing a Leave, and I have set Appear to true, i just want this to happen on initial load of the home page)

    .fade-appear {
    opacity: 0.01;
    @include prefix(transition, (opacity 2500ms), webkit ms moz o);
    }
    .fade-appear.fade-appear-active {
    opacity: 1;
    }

Also, putting ReactCSSTransitionGroup at this level, in this element, makes my flexbox get all weird. The components are no longer in columns of 4 (or however many based on screen width), they are in one single column down the center...

Where do I put the transition group HOC?

Hierarchy:

<HomeIndex>
    <Poll-List>
         <Poll-Links>

score 2 · Answer 1 · edited Oct 10 '16 at 06:46

2

You can simply add this style in your css file, try to remove the hyphen between class name and make it in camelcasing:

.fadeAppear {
    opacity: 1;
    transition: opacity 0.3s ease-in;-webkit-transition: opacity 0.3s ease-in;
}

import your css file in your redux code,

@import mycss from '../path/style.css'

and add the given class in css in wherever needed.

as:

return (
    <div className='poll-list'>
        <ReactCSSTransitionGroup className={mycss.fadeAppear} >
        {props.pollsList.length > 0 ? polls : null}
        </ReactCSSTransitionGroup>
    </div>
)

Hope this works!

edited Oct 10 '16 at 06:46

Sven Schoenung

30,224
8
65
70

answered Oct 10 '16 at 06:33

ARUSHI SHUKLA

21
3

Hmmm...am I using ReactCSSTransitionGroup correctly though? I'll give that a shot I guess...but why is my content rendering incorrectly? Nevermind the transition not working...the actual divs are squished into one column instead of being spread out into multiple ala flexbox... – MindfulBell Oct 10 '16 at 20:38

ReactCSSTransitionGroup rendering list of items

1 Answers1