ReactCSSTransitionGroup отрисовка списка элементов

Question

Так что я пытаюсь отобразить переход с ReactCSSTransitionGroup при загрузке главной страницы. Он должен отображать список предметов ниже jumbotron. Эти предметы поступают из магазина Redux. Они передаются из компонента контейнера, называемого home_index.js, который знает о Redux Store. Сам компонент «poll-list.js» содержит ссылки опроса, подлежащие переходу; он (и его дочерний элемент) является компонентом DUMB. Смысл, он не имеет состояния и не знает о магазине redux. (Могут ли эти компоненты использовать ReactCSSTransitionGroup?)

В любом случае, я не могу, для жизни меня, заставить это исчезать при переходе на работу. Я знаю, что я должен что-то делать неправильно ... но не могу понять.

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> 
) 

}

А вот CSS (обратите внимание, что я не делаю увольнительную, и я поставил Появляются так, я просто хочу, чтобы это произошло на начальной загрузки домашней страницы)

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

Кроме того, помещение ReactCSSTransitionGroup на этом уровне в этом элементе делает мой flexbox все странным. Компоненты больше не находятся в столбцах из 4 (или, как многие из них, основаны на ширине экрана), они находятся в одной колонне вниз по центру ...

Где я могу установить переходную группу HOC?

Hierarchy: 

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

Answer 1

Вы можете просто добавить этот стиль в файле CSS, попробуйте удалить дефис между именем класса и сделать его в camelcasing:

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

импортировать файл CSS в вашем коде Redux,

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

и добавьте данный класс в css туда, где это необходимо.

как:

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

Надеется, что это работает!