ReactCSSTransitionGroup不起作用

Question

我在ReactCSSTransitionGroup中遇到了一些問題。當用戶點擊頁面上的按鈕時，我想顯示某種Modal表單，並帶有一些花哨的動畫。這是代碼：

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中添加一個密鑰，但它沒有奏效。換一個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">，看看是否有幫助。