ReactCSSTransitionGroupが機能しません。

Question

ReactCSSTransitionGroupに問題があります。ユーザーがページ上のボタンをクリックすると、いくつかの派手なアニメーションが表示されます。これはコードです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import AppConfig from './AppConfig'; 

export default class AppTop extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { openConfig: false }; 
    } 
    toggleConfig() { 
     this.setState({ openConfig: !this.state.openConfig }); 
    } 
    render() { 
     // only shows up openConfig is true 
     const domAppConfig = this.state.openConfig ? <AppConfig ... /> : ''; 

     return (
      <div> 
       ... //some elements 
       <button onClick={this.toggleConfig.bind(this)}>Config</button> 
       { domAppConfig } 
      </div> 
     ); 
    } 
} 

これはAppTopコンポーネントです。レンダリングの中にあるボタンコンポーネントを見ることができます。これをクリックすると、openConfigの状態が切り替わります。これはAppConfigコンポーネントです：

import React from 'react'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 

export default class AppConfig extends React.Component { 
    render() { 
     return (
      <ReactCSSTransitionGroup 
       transitionName="anim-app-config" 
       transitionEnterTimeout={300} 
       transitionLeaveTimeout={300} 
      > 
       <div id="app-config"> 
        <h1>App Config</h1> 
        <p>Helloworld!</p> 
       </div> 
      </ReactCSSTransitionGroup> 
     ); 
    } 
} 

コンポーネントはかなりシンプルですが、一部のテキストを印刷するだけです。これは「.anim-app-config」のスタイルです。

.anim-app-config-enter { 
    opacity: .1; 
} 
.anim-app-config-enter.anim-app-config-enter-active { 
    opacity: 1; 
    transition: opacity 300ms ease-in; 
} 
.anim-app-config-leave { 
    opacity: 1; 
} 
.anim-app-config-leave.anim-app-config-leave-active { 
    opacity: .1; 
    transition: opacity 300ms ease-in; 
} 

このアプリケーションを実行すると、アニメーションが機能しません。ちょうどコンポーネントが表示され、アニメーションなしですぐに非表示になります。これについて検索し、AppConfig Componentにキーを追加しようとしましたが、うまく機能しませんでした。もう1つのdivを折り返してもうまくいきませんでした。 transitionAppear = {true}を追加することも私のために働いていません。

ReactCSSTransitionGroupコンポーネントを使用していますか？それとも私は何か逃したのだろうか？ Reactにアニメーションを追加するのは難しいので、いくつかのアドバイスをお願いします。ありがとう。

Answer 1

ApptopにReactCSSTransitionGroupがあるはずです。つまり、レンダリングされるかどうかという点です。 AppConfigの中でそれを作成すると、それはまっすぐなコンポーネントとしてレンダリングされるので、アニメーションはありません。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import AppConfig from './AppConfig'; 

export default class AppTop extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { openConfig: false }; 
    } 
    toggleConfig() { 
     this.setState({ openConfig: !this.state.openConfig }); 
    } 
    render() { 
     // only shows up openConfig is true 
     const domAppConfig = this.state.openConfig ? <AppConfig ... /> : ''; 

     return (
      <div> 
       ... //some elements 
       <button onClick={this.toggleConfig.bind(this)}>Config</button> 
         <ReactCSSTransitionGroup 
       transitionName="anim-app-config" 
       transitionEnterTimeout={300} 
       transitionLeaveTimeout={300} 
      > 
       {domAppconfig} 
      </ReactCSSTransitionGroup> 
      </div> 
     ); 
    } 
} 

Answer 2

単一のアイテムだけをレンダリングする場合でも、ReactCSSTransitionGroupのすべての子にキー属性を指定する必要があります。これはReactがどんな子供たちが入ったり、放置したり、滞在したかを決定する方法です。

key="1"に<div id="app-config">のようなものを追加してみてください。