React 组件和 CSSTransitionGroup答案

【问题标题】：React Component and CSSTransitionGroupReact 组件和 CSSTransitionGroup
【发布时间】：2015-02-07 17:07:26
【问题描述】：

早期使用 Facebook ReactJS。简单的 CSS 淡入过渡。它可以与 ReactJS v0.5.1 一起按预期工作。它不适用于 v11.1、v12.0、v12.1。这是 CSS 和 JSX：

CSS

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

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

用于 ReactJS v12.1 的 JSX

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example">
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

这里是 Codepen 的列表：

v0.5.1 http://codepen.io/lanceschi/pen/ByjGPW
v0.11.1 http://codepen.io/lanceschi/pen/LEGXgP
v0.12.0 http://codepen.io/lanceschi/pen/ByjGOR
v0.12.1 http://codepen.io/lanceschi/pen/YPwROy

任何帮助表示赞赏。

干杯，卢卡

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

看起来CSSTransitionGroup 用于在初始挂载时进行动画处理，但在 React v0.8.0 左右不再使用了。请参阅https://github.com/facebook/react/issues/1304 了解更多信息。

一种解决方案是在安装<HelloWorld> 之后简单地安装<h1>，如下所示：

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  getInitialState: function() {
    return { mounted: false };
  },
  componentDidMount: function() {
    this.setState({ mounted: true });
  },
  render: function() {
    var child = this.state.mounted ?
      <h1>Hello world</h1> :
      null;

    return (
      <ReactTransitionGroup transitionName="example">
        {child}
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

实例：http://codepen.io/peterjmag/pen/wBMRPX

请注意，CSSTransitionGroup 用于在动态添加、删除和替换子组件时转换子组件，不一定用于在初始渲染时为它们设置动画。玩弄this TodoList Codepen（改编自this example in the React docs）看看我的意思。列表项在添加和删除时淡入淡出，但在初始渲染时不会淡入。

编辑：最近引入了一个新的“出现”过渡阶段，以允许安装动画效果。有关详细信息，请参阅https://github.com/facebook/react/pull/2512。（提交已经合并到 master 中，所以我想它会与 v0.12.2 一起发布。）理论上，你可以做这样的事情来让 <h1> 在挂载时淡入：

...
<ReactTransitionGroup transitionName="example" transitionAppear={true}>
    <h1>Hello world</h1>
</ReactTransitionGroup>
...

CSS

.example-appear {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

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

【讨论】：

得到了同样的信息 ;) 那么下一个版本！

【解决方案2】：

我更深入地研究了问题。使用当前版本的 ReactJS 似乎不可能进行初始 CSS 转换。更多信息和想法here。

v0.13.x 很可能会发生变化。您可以查看source code，它具有 transitionAppear prop。

编辑：我从 GitHub 下载了最新的 ReactJS (v0.13.0 - alpha) 并构建了它。如果您使用 transitionAppear 道具（要明确设置为真），现在一切都会相应地工作。您将在下面找到更新后的 CSS 和 JSX 以及实时示例：

CSS：

.example-appear {
  opacity: 0.01;
  transition: opacity 0.5s ease-in;
}

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

JSX for ReactJS v0.13.0 - alpha：

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example" transitionAppear={true}>
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

实例：http://codepen.io/lanceschi/pen/NPxoGV

干杯，升

【讨论】：

该死，你打败了我。 :-)

【解决方案3】：

出现

如果在<Transition> 组件安装时显示组件，通常不会转换组件。如果您想在第一个挂载集appear 上转换为true，则组件将在<Transition> 挂载后立即转换。 from react-transition-group Docs

使用示例

JSX：

<TransitionGroup>
  <CSSTransition classNames="fade" appear={true} >
    <h1>Hello world!</h1>
  </CSSTransition>
</TransitionGroup>

CSS：

.fade-appear {
  opacity: 0.01;
  z-index: 1;
}
.fade-appear.fade-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

截至日期：

反应 v16.6.3
react-transition-group v2.5.1

【讨论】：