属性更改时反应动画元素？

Question

当属性发生变化时如何淡入元素？

我希望statusMessage()函数返回的元素在每次this.props.statusMessage更改时都淡入淡出.

目前尚未应用任何动画.它似乎没有添加任何类名.

class SelectPlayer extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    selectedId = this.props.selectedId;
    selectedPlayerName = this.props.selectedPlayerName;
    Store.dispatch(Actions.updateScore(selectedId, selectedPlayerName));
  }

  statusMessage() {
    return (
      <ReactCSSTransitionGroup
        transitionName='message'
        transitionAppear={true}
        transitionAppearTimeout={2000}
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}>
          <div key="1">{this.props.statusMessage.text}</div>
      </ReactCSSTransitionGroup>
    )
  }

  render() {
    if (this.props.selectedPlayerName) {
      return (
        <div className="details">
          <div className="name">{this.props.selectedPlayerName}</div>
          <button className="inc" onClick={this.handleClick}>
            Add 5 points
          </button>
          { this.statusMessage() }
        </div>
      );
    }
    else {
      return (
        <div className="message">Click a player to select</div>
      );
    }
  }
};

CSS

.message {
  line-height: 2.25rem;
  text-align: center;
}

.message-appear {
  opacity: 0.01;
}

.message-appear.message-appear-active{
  opacity: 1;
}

Answer 1

这可能会更容易做出反应 - 动画变化(免责声明,我是作者).

在渲染中你会做这样的事情:

render() {
  if (this.props.selectedPlayerName) {
    return (
      <div className="details">
        <div className="name">{this.props.selectedPlayerName}</div>
        <button className="inc" onClick={this.handleClick}>
          Add 5 points
        </button>
        <AnimateOnChange 
          baseClassName="message" 
          animationClassName="message-clicked" 
          animate={this.props.selectedId === this.props.id}>
            {this.props.statusMessage.text}
        </AnimateOnChange>
      </div>
    );
  }
  else {
    return (
      <div className="message">Click a player to select</div>
    );
  }
}

然后在CSS中使用动画:

.message-clicked {
  animation: clicked-keyframes 1s;
}

@keyframes clicked-keyframes {
  from {opacity: 0.01}
  to {opacity: 1}
}

很难想象你想要的结果如何.但是对于它的声音,你有一个可以点击的玩家列表,然后是所选玩家的视图？在这种情况下,您应该使用包含所选播放器的数组,并使用ReactCSSTransitionGroup渲染进入/离开阵列的玩家.

Answer 2

官方文档声明您需要为ReactCSSTransitionGroup中的每个元素提供密钥

React使用此键进行DOM操作.所以它应该是独一无二的.同样根据我的经验,您应该以相同的方式配置transitionAppear和transitionEnter,以便更改的初始动画和动画看起来相同.

因此,您需要为ReactCSSTransitionGroup提供一些唯一键(或至少在每个更改的子元素的当前状态(或道具)和下一个状态(或道具)之间不同)

<ReactCSSTransitionGroup transitionName="example"
                         transitionAppear={true}
                         transitionAppearTimeout={500}
                         transitionLeaveTimeout={500}
                         transitionEnterTimeout={500}>
    <h1 key={key}>Hello, {name}</h1>
<ReactCSSTransitionGroup>

您可以查看JSFIDDLE以了解它是如何工作的.

注意我已经使用{this.state.name}作为密钥,因此在我的示例中它可以正常工作.但在现实世界的应用程序中,我认为你应该使用其他东西作为关键

Answer 3

几周前我遇到了类似的问题。问题是需要ReactCSSTransitionGroup在其子级之前渲染。在您的示例中，ReactCSSTransitionGroup和 都this.props.statusMessage.text将在 时同时呈现this.props.selectedPlayerName === true。

我发现这篇文章可能有用：这里

最近，在使用 React.js 的 ReactCSSTransitionGroup 插件时，我遇到了当组件首次渲染到 DOM 时无法将 Enter 转换应用于子元素的问题。

当组件最初渲染时，ReactCSSTransitionGroup 及其所有子元素同时出现在 DOM 中。但是，ReactCSSTransitionGroup 只会将适当的动画类应用于初始渲染后进入 DOM 的任何子元素。