animation - 項目の ReactCSSTransitionGroup レンダリング リスト

Question

そのため、ホームページの読み込み時に ReactCSSTransitionGroup でトランジションを表示しようとしています。ジャンボトロンの下にアイテムの一覧を表示することです。この商品は Redux ストアからのものです。これらは、Redux Store を認識する home_index.js というコンテナー コンポーネントから渡されます。コンポーネント自体の 'poll-list.js' には、遷移する項目である poll-links が含まれています。それ (およびその子) は 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です（私はLeaveを行っていないことに注意してください。Appearをtrueに設定しました。これをホームページの初期ロード時に発生させたいだけです）

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

また、この要素のこのレベルに ReactCSSTransitionGroup を配置すると、フレックスボックスがすべて奇妙になります。コンポーネントは 4 列 (または画面の幅に基づいて多数) ではなく、中央の 1 つの列に配置されています...

遷移グループ HOC はどこに置くのですか?

Hierarchy:

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