React Animation無法卸載組件

Question

我正在一個組件上渲染另一個我想為其入口和出口設置動畫的元素。 現在，我已經有了基本設置，並且無法觸發淡出。 我是否將組件包裝在ReactCSSTransitionGroup中的錯誤位置？

碼：

import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup;

class Parent extends React.Component {
  static defaultProps = {
    exampleArr = ['one', 'two', 'three']
  };

  render() {
    <div>
      {exampleArr ?
        {this.props.exampleArr.map((child) => {
          return <ReactCSSTransitionGroup
            transitionName="example"
            transitionAppear={true}
            transitionLeave={true}
            transitionEnterTimeout={600}
            transitionLeaveTimeout={600}
          >
           <Child key={}/>
          </ReactCSSTransitionGroup>
         });
         : null
    </div>
  }
}

我的CSS如下：

.example-enter {
  opacity: 0.01;
 }

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

 .example-leave {
   opacity: 1;
 }

 .example-leave.example-leave-active {
   opacity: 0.01;
   transition: opacity 600ms ease-in;
 }

是否有人對為什么它在掛載中逐漸消失有任何見解，而只是在彈出時沒有任何動畫就完全消失了？

Answer 1

當前，您正在將exampleArr每個數組項包裝在過渡組中。 而是將整個生成的元素包裝在單個過渡組中，如下所示：

import React, { Component, cloneElement } from 'react;
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class Parent extends Component {
  render() {
    <div>
      <ReactCSSTransitionGroup
        transitionName="example"
        transitionAppear={true}
        transitionAppearTimeout={600}
        transitionEnterTimeout={600}
        transitionLeaveTimeout={600}
      >
        {this.props.children}
      </ReactCSSTransitionGroup>
    </div>
  }
}

然后，將您的父元素用作子元素的包裝，如下所示：

<Parent>
  <div>one</div>
  <Child>two</Child>
  <AnyOtherComponent>three</AnyOtherComponent>
</Parent>

如果像示例中那樣在父類內部創建元素，請將{this.props.children}替換為：

{this.props.exampleArr.map(item => <div>{item}</div>)}