React Animation无法卸载组件

Question

I'm working on a component that renders another element that I would like to animate its entrance and exit.On mount and unmount, I would like for this component to fade it's opacity, respective to the action it corresponds with. Right now, I have this basic setup, and I'm unable to trigger a fade out. Am I wrapping my component in ReactCSSTransitionGroup in the wrong place?

Code:

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>
  }
}

My CSS is as follows:

.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;
 }

Does anybody have any insight as to why it's fading in on mount, but just popping away entirely without any animation on unmount?

Answer 1

Currently, you are wrapping each array item of your exampleArr in a transition group. Instead, wrap the entirety of your generated elements in a single transition group like this:

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>
  }
}

Then, use your parent element as a wrapper around the children like this:

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

If you create the elements inside your parent class as in your example, replace {this.props.children} with:

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