ReactCSSTransitionGroup rendering list of items - animation

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>

Answer 1

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!