ReactCSSTransitionGroup 不工作

Question

我试图让一个元素淡入，但它根本没有做任何事情。总体目标是在我切换状态时显示元素（通过单击并触发 showOptions()）

不管有没有这个点击处理程序，我似乎都无法让任何动画正常工作。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { switchOption } from '../actions/index';

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

class PropertyColumn extends Component {
 constructor(props) {
  super(props);

  this.state = {className: 'hidden'};
 }

 render() {
  var activeOption = null;

  this.props.options.forEach(function(option) {
   if (option.active) {
    activeOption = option;
   }
  });

  return (
   <div>
    <img src={activeOption.image_url} />
    <h2>{activeOption.name}</h2>
    <p>{activeOption.description}</p>
    <a onClick={() => this.showOptions()} href='#' className={"btn btn-primary"}>Change</a>

    <ReactCSSTransitionGroup
              transitionName="example"
              className= {this.state.className}
              transitionEnterTimeout={300}
              transitionLeaveTimeout={300}
              component='ul'>
     {this.listOptions()}
    </ReactCSSTransitionGroup>
   </div>
  )
 }

 listOptions() {
  return this.props.options.map((option, i) => {
   return (
    <li onClick={() => this.props.switchOption(this.props.data, this.props.columnId, i)} key={option.id}>{option.name}</li>
   )
  })
 }

 showOptions() {
  if (this.state.className == 'visible') {
   this.setState({className: 'hidden'})
  } else {
   this.setState({className: 'visible'})
  }
 }
}

function mapStateToProps(state) {
 return {
  data: state.data
 }
}

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ switchOption }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(PropertyColumn)

这里是 css

.example-enter {
  opacity: 0.01;
}

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

.example-leave {
  opacity: 1;
}

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

Answer 1

我已经为您制作了一个 fiddle 示例。 ReactCSSTransitionGroup 不会根据 css 可见性属性触发动画。无论是否正在渲染 child，它都会触发动画。

您应该进行的主要更改：

showOptions() 应该切换状态的布尔值属性， 而不是 class 名称字符串 。根本不需要搞乱 className。
基于这个布尔值属性，做一个简单的三元验证，用于渲染child个元素

showOptions 可以这样实现：

showOptions() {
  this.setState({isVisible: !this.state.isVisible})
}

并且 ReactCSSTransitionGroup 组件应该如下所示：

<div>
    <a onClick={() => this.showOptions()} href='#' className={"btn btn-primary"}>Change</a>
    <ReactCSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}
        component='div'>
            {this.state.isVisible ? ( <ul className={this.state.className}>{this.listOptions()}</ul>) : null} 
    </ReactCSSTransitionGroup>
</div>

ReactCSSTransitionGroup 不工作

ReactCSSTransitionGroup not working

javascript

animation

reactjs

reactcsstransitiongroup