css - 在 React 中缓和过渡

Question

我刚开始使用 React，遇到了一个问题，我原以为它会很简单。我想要做的就是让一段文本基于一个简单的触发器淡入然后淡出，但我无法让它淡出。

代码在下面，我有一个按钮可以显示消息。它很好地淡出并在两秒后消失，但我期待消息在离开时淡出......但显然我误解了 React-ish 过渡 CSS 中的含义。

这是 React 组件:

class MessageSender extends React.Component {
  render() {
    let sent_element = null;
    if (this.state.linkSent) {
      sent_element = <AnimatedText/>;
    }
  return (
    <div>
      {sent_element}
    </div>
  );


    //A fetch then triggers:
    ...then((json) => {
      if (json.success) {
        _this.setState({
          linkSent: true
        })
        setTimeout(
            function(){
              _this.setState({linkSent:false});
            },2000
        )
      }
    });
}

class AnimatedText extends React.Component {
  render() {
    return <ReactTransitionGroup transitionAppear={true} transitionName="fadeInOut">
      <div>Sent!</div>
    </ReactTransitionGroup>;
  }
}

这是 CSS:

.fadeInOut-appear {
  opacity: 0.01;
  transition: opacity 0.4s ease-in-out;
  -webkit-transition: opacity 0.4s ease-in-out;
}

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

.fadeInOut-leave {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  -webkit-transition: opacity 0.4s ease-in-out;
}

.fadeInOut-leave.fadeInOut-leave-active {
  opacity: 0.01;
}

Answer 1

你应该使用 ReactCSSTransitionGroup ，关于 ReactTransitionGroup 的高级 API

import `ReactCSSTransitionGroup` from "react-addons-css-transition-group";

在 React 中 > v0.14 , 你还必须通过 transitionEnterTimeout transitionLeaveTimeout和可选的 transitionAppearTimeout如果你有 transitionAppear 组件的 Prop 启用(你做的)。

最后，你需要通过 key -属性给你的动画 child

You must provide the key attribute for all children of ReactCSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.

您可能还需要稍微重构您的代码，以便您的 ReactCSSTransitionGroup不在<AnimatedText >里面，而是包裹在你的 {sent_element} 周围

参见 React/Animation-docs获取更多信息。