title: ReactCSSTransitionGroup rendering list of items
body: <p>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?)</p>
  
  <p>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. </p>
  
  <pre><code>    const appearTransition = {
      transitionName: "fade",
      transitionLeave: false,
      transitionEnter: false,
      transitionAppear: true,
      transitionAppearTimeout: 2500
  };
  
  let polls;
  if (props.pollsList) {
      polls = props.pollsList.map((poll, ind) =&gt; {
          return (
                  &lt;PollLink
                  className='poll-link'
                  title={poll.title} 
                  index={ind}
                  id={poll.id} 
                  key={ind}
                  /&gt;
          )
      });
  }
  return (
      &lt;div className='poll-list'&gt;
          &lt;ReactCSSTransitionGroup {...appearTransition}&gt;
          {props.pollsList.length &gt; 0 ? polls : null}
          &lt;/ReactCSSTransitionGroup&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>}</p>
  
  <p>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)</p>
  
  <pre><code>    .fade-appear {
      opacity: 0.01;
      @include prefix(transition, (opacity 2500ms), webkit ms moz o);
      }
      .fade-appear.fade-appear-active {
      opacity: 1;
      }
  </code></pre>
  
  <p>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...</p>
  
  <p>Where do I put the transition group HOC?</p>
  
  <pre><code>Hierarchy:
  
  &lt;HomeIndex&gt;
      &lt;Poll-List&gt;
           &lt;Poll-Links&gt;
  </code></pre>