ReactJS ReactCSSTransitionGroupは初期ロード時にアニメ化するだけです

Question

私はReact/Reduxアプリケーション内の経路変更でアニメーション化されたトランジションを設定しようとしています。私はSOと公式のチュートリアルの例をガイドとして使用していますが、これまでのところ、最初の負荷で作業するためにフェードを得ることはできませんでした。ルートを変更すると、コンポーネントはアニメーションなしで表示されます。

明らかなことがありません。コンテンツをアニメーション化しようとすると、これは最適な方法ですか？

/* 
** Loop through ACF components to layout page 
*/ 

blocks =() => { 
if (this.props.pages.pages[0]) { 
    return this.props.pages.pages[0].acf.components && 
    this.props.pages.pages[0].acf.components.map((block, index) => { 
     let Component = componentMapping[block.acf_fc_layout]; 
     return <Component key={index} data={block} id={index} />; 
    }); 
    } 
}; 

/* 
** Render page on state change 
*/ 

render() { 
return (
    <div className="App"> 
    <NavContainer /> 
    <ReactCSSTransitionGroup 
     transitionName="example" 
     transitionAppear={true} 
     transitionAppearTimeout={500} 
     transitionEnterTimeout={500} 
     transitionLeaveTimeout={300} 
    > 
     {this.blocks()} 
    </ReactCSSTransitionGroup> 
    </div> 
); 
} 

次のように私が含まれているCSSは次のとおりです。

.example-enter { 
opacity: 0.01; 
} 

.example-enter.example-enter-active { 
opacity: 1; 
transition: opacity 500ms ease-in; 
} 

.example-leave { 
opacity: 1; 
} 
.example-appear { 
opacity: 0.01; 
} 

.example-appear.example-appear-active { 
opacity: 1; 
transition: opacity .5s ease-in; 
} 
.example-leave.example-leave-active { 
opacity: 0.01; 
transition: opacity 300ms ease-in; 
} 

私は誰も与えることができることを任意の助けに感謝。前もって感謝します！

Answer 1

いくつかのトラブルシューティング手順を実行して、その最下部まで進んでください。まず、ReactCSSTransitionGroupコンポーネントの仕組みに関する基本的なヒントをいくつか紹介しましょう。

<ReactCSSTransitionGroup/>は、マウント後に子供が追加および削除されてページに存在する必要があります。例えば入力ボックスに基づいてフィルタリングしている従業員のリストがあります。フィルタが追加および削除されているものを制御するので、それらのアイテムは出たり来たり、アニメーション化されています。 <ReactCSSTransitionGroup/>が最初に存在し、コンポーネントがマウントされている必要があります。

React Routerを使用すると、ルートを変更するときにコンポーネントをマウントしてアンマウントすることになります。 <ReactCSSTransitionGroup/>がマウントおよびアンマウントされている各コンポーネントの内側にある場合、移行は起動しません。私はこれがあなたが経験しているものだと思います。私はこのNPM packageを試して、経路の変更を伴うアニメーションの世話をすることをお勧めします。

あなたのアニメーションが1回だけ点滅する問題は、上記とは別の問題です。私はこの部分が心配です：

return this.props.pages.pages[0].acf.components && 
    this.props.pages.pages[0].acf.components.map((block, index) => { 
     let Component = componentMapping[block.acf_fc_layout]; 
     return <Component key={index} data={block} id={index} />; 
    }); 

はあなたに面白い結果を与えることができ& &演算子で変数を返します。明示的なifステートメントを実行してみてください。それとも正直これだけにコードを変更：

if (this.props.pages.pages[0]) { 
    return this.props.pages.pages[0].acf.components.map((block, index) => { 
     let Component = componentMapping[block.acf_fc_layout]; 
     return <Component key={index} data={block} id={index} />; 
    }); 
} 

私が持っていたもう一つの考えでは、そのコンポーネントの作成（componentMapping[block.afc_fc_layout]）を省略し、単に<div>を返すときに何が起こるか見ていました。何が起こるかを見て、それがあなたを困らせる原因になっているかどうかを確認します。