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

我希望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 (
      
          
{this.props.statusMessage.text}
      
    )
  }

  render() {
    if (this.props.selectedPlayerName) {
      return (
        

          
{this.props.selectedPlayerName}
          
            Add 5 points
          
          { this.statusMessage() }
        
      );
    }
    else {
      return (
        
Click a player to select
      );
    }
  }
};

CSS

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

.message-appear {
  opacity: 0.01;
}

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

arve0.. 10

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

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

render() {
  if (this.props.selectedPlayerName) {
    return (
      

        
{this.props.selectedPlayerName}
        
          Add 5 points
        
        
            {this.props.statusMessage.text}
        
      
    );
  }
  else {
    return (
      
Click a player to select
    );
  }
}

然后在CSS中使用动画:

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

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

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

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

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

render() {
  if (this.props.selectedPlayerName) {
    return (
      

        
{this.props.selectedPlayerName}
        
          Add 5 points
        
        
            {this.props.statusMessage.text}
        
      
    );
  }
  else {
    return (
      
Click a player to select
    );
  }
}

然后在CSS中使用动画:

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

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

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

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

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

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

    
Hello, {name}

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

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