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

有没有人知道为什么它会在mount上消失，但只是在没有安装动画的情况下完全弹出？

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

React Animation无法卸载组件

1 个答案: