javascript React 组件和 CSSTransitionGroup

React Component and CSSTransitionGroup

提问by Luca Anceschi

early days with Facebook ReactJS. Simple CSS fade-in transition. It works as expected with ReactJS v0.5.1. It doesn't with v11.1, v12.0, v12.1. Here's the CSS and JSX:

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

CSS

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;
}

JSX for ReactJS v12.1

用于 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);

Here's the list of Codepens:

这是 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

• 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

Any help appreciated.

任何帮助表示赞赏。

Cheers, Luca

干杯，卢卡

回答by peterjmag

It looks like CSSTransitionGroupused to animate on initial mount, but it doesn't any more as of React v0.8.0 or so. See https://github.com/facebook/react/issues/1304for a bit more info.

它看起来像CSSTransitionGroup用于在初始安装时设置动画，但从 React v0.8.0 左右开始不再使用。有关更多信息，请参阅https://github.com/facebook/react/issues/1304。

One solution is to simply mount the <h1>after <HelloWorld>is mounted, like so:

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

/**@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);

Live example: http://codepen.io/peterjmag/pen/wBMRPX

现场示例：http: //codepen.io/peterjmag/pen/wBMRPX

Note that CSSTransitionGroupis intended for transitioning child components as they're dynamically added, removed, and replaced, not necessarily for animating them on initial render. Play around with this TodoList Codepen(adapted from this example in the React docs) to see what I mean. The list items fade in and out as they're added and removed, but they don't fade in on the initial render.

请注意，CSSTransitionGroup它用于在动态添加、删除和替换子组件时过渡它们，不一定用于在初始渲染时为它们设置动画。玩弄这种TodoList的Codepen（改编自本例中的文档做出反应），以明白我的意思。列表项在添加和删除时淡入和淡出，但它们不会在初始渲染时淡入。

EDIT: A new "appear" transition phase has been introduced recently to allow for animation-on-mount effects. See https://github.com/facebook/react/pull/2512for details. (The commit has already been merged into master, so I imagine it'll be released with v0.12.2.) Theoretically, you could then do something like this to make the <h1>fade in on mount:

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

JS

JS

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

CSS

CSS

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

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

回答by Luca Anceschi

I looked into the issuea little deeper. With the current version of ReactJS it seems not possible to make an initial CSS transition. More info and thoughts here.

我更深入地研究了这个问题。使用当前版本的 ReactJS，似乎无法进行初始 CSS 转换。更多信息和想法在这里。

Most probably things are gonna change with v0.13.x. You can have a look at the source codewhich features a transitionAppearprop.

很可能事情会随着 v0.13.x 而改变。你可以看看源代码，其特点是transitionAppear道具。

EDIT: I downloaded from GitHub the latest ReactJS (v0.13.0 - alpha) and built it. Everything now works accordingly if you make use of transitionAppearprop (is to be set true explicitly). Here below you'll find the updated CSS and JSX as well as the live example:

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

CSS:

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:

用于 ReactJS v0.13.0 的 JSX - 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);

Live example: http://codepen.io/lanceschi/pen/NPxoGV

现场示例：http: //codepen.io/lanceschi/pen/NPxoGV

Cheers, L

干杯，L

回答by Luca Anceschi

appear

Normally a component is not transitioned if it is shown when the <Transition>component mounts. If you want to transition on the first mount set appearto true, and the component will transition in as soon as the <Transition>mounts. from react-transition-group Docs

出现

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

Example of usage

使用示例

JSX:

JSX：

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

CSS:

CSS：

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

As of:

作为：

• React v16.6.3
• react-transition-group v2.5.1

• 反应 v16.6.3
• 反应过渡组 v2.5.1