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

react-animate-on-change可能会更容易（免责声明，我是作者）。

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

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的同时呈现。

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

最近在为React.js使用ReactCSSTransitionGroup附加组件时，我遇到了在组件首次呈现给DOM时无法将输入转换应用于子元素的问题。

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

Answer 4

在当前版本的ReactTransitionGroup中，这与@Sim Dims类似。

function Example() {

        const [tick, setTick] = useState(true);

        return (
            <div>
                <CSSTransition
                    in={tick}
                    appear={true}
                    timeout={2000}
                    classNames="fadein"
                    unmountOnExit={false}
                >
                    <div className="box"></div>
                </CSSTransition>

                <button onClick={() => {
                    setTick(!tick)
                }}>Show</button>

            </div>
        );
    }

您只需切换无意义的布尔值即可触发更新并使用相同的输入和退出动画。

.fadein-appear,
.fadein-enter,
.fadein-exit {
    opacity: 0;
}

.fadein-appear-active,
.fadein-enter-active,
.fadein-exit-active {
    opacity: 1;
    transition: all 2s;
}

.fadein-appear-done,
.fadein-enter-done,
.fadein-exit-done {
    opacity: 1;
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
}

https://codesandbox.io/embed/modern-dust-0yfjg

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

4 个答案: