javascript - 即使设置了键，React CSSTransitionGroup 也不起作用

Question

从昨天开始，我一直在尝试为我的图像轮播制作动画。据我了解，您可以使用 CSSTransitionGroup 包装要进行动画处理的内容，并确保它保留在 dom 中，并为过渡组的每个子级指定一个唯一的键。我相信我已经遵循了这一切，但我没有看到任何转变。

值得一提的是，当我试图让它工作时，我怀疑 key 是否有问题，所以我尝试使用随机字符串设置 key 。每次状态改变时，键都会改变，并且出于某种未知的原因我可以看到动画。谁可以给我解释一下这个。

我不确定我哪里出了问题，无论是过渡组的版本还是为 child 设置 key ，没有线索!

下面是复制我的问题的代码。

var CSSTransitionGroup = React.addons.CSSTransitionGroup


class Images extends React.Component {
    constructor(props){
    super(props);
    this.state = {
        showComponent: false,
    }
  }

  componentWillReceiveProps(nextProps){
    if (this.props.name === nextProps.showComponentName){
        this.setState({
        showComponent: true,
      })
    } else {
      this.setState({
        showComponent: false,
      })
    }
  }

  render() {
    if (this.state.showComponent){
        return (
        <img src={this.props.url} />
      )
    } else {
        return null;
    }
  }
}


class TransitionExample extends React.Component {

  constructor (props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state= {
        showComponentName: null,
    }
  }

    onClick(button) {
    this.setState({
        showComponentName: button.currentTarget.textContent,
    })
  }

    render() {
        var imageData = [
        "http://lorempixel.com/output/technics-q-c-640-480-9.jpg",
            "http://lorempixel.com/output/food-q-c-640-480-8.jpg",
            "http://lorempixel.com/output/city-q-c-640-480-9.jpg",
            "http://lorempixel.com/output/animals-q-c-640-480-3.jpg"
    ];

        var images = [];
        for (var i in imageData) {
            i = parseInt(i, 10);
            images.push(
                <Images url={imageData[i]} showComponentName={this.state.showComponentName} name={imageData[i]} key={imageData[i]} />
            );
        }

    return (
        <div>
        <div>
        <button onClick={this.onClick}>{imageData[0]}</button>
        <button onClick={this.onClick}>{imageData[1]}</button>
        <button onClick={this.onClick}>{imageData[2]}</button>
        <button onClick={this.onClick}>{imageData[3]}</button>
      </div>
        <div className="transitions">
        <CSSTransitionGroup
            transitionName="viewphoto"
          transitionEnterTimeout={2000}
          transitionLeaveTimeout={2000}
          transitionAppearTimeout={2000}
          transitionAppear={true}
          transitionEnter={true}
          transitionLeave={true}>
                        {images}
        </CSSTransitionGroup>
            </div>
      </div>
    );
    }
}


ReactDOM.render(
  <TransitionExample />,
  document.getElementById('container')
);

我还提供了 jsfiddle 上示例的链接

Answer 1

您的代码的问题是 images 始终是不安装/卸载的元素数组。正确的做法是改变 child 。例如，如果您将 fiddle 的渲染方法的返回值替换为:

return (
    <div>
    <div>
    <button onClick={this.onClick}>{imageData[0]}</button>
    <button onClick={this.onClick}>{imageData[1]}</button>
    <button onClick={this.onClick}>{imageData[2]}</button>
    <button onClick={this.onClick}>{imageData[3]}</button>
  </div>
    <div className="transitions">
    <CSSTransitionGroup
        transitionName="viewphoto"
      transitionEnterTimeout={2000}
      transitionLeaveTimeout={2000}
      transitionAppearTimeout={2000}
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}>
          <img src={this.state.showComponentName} key={this.state.showComponentName}/>
    </CSSTransitionGroup>
        </div>
  </div>
);

动画成功了!使用简单的 img 而不是您的 Images 组件，并为其提供图像 url(这只在您单击按钮时有效，showComponentName 应该是初始化以显示第一张图像)。当然，您也可以使用自定义组件，但这里的要点是，如果您希望触发动画，则必须更改 CSSTransitionGroup 的子元素，否则您始终会渲染相同的四个图像 组件无论是否返回i​​mg。您可能想查看react-css-transition-replace因为在替换时它通常效果更好。