Question

早期使用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;
}

JSX for ReactJS v12.1

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

以下是Codepens列表：

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

任何帮助表示感谢。

干杯，卢卡

Answer 1

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

一种解决方案是在安装<h1>之后简单地挂载<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);

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

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

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

<强> JS

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

Answer 2

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

最有可能的事情会随v0.13.x而改变。您可以查看具有 transitionAppear 道具的source code。

编辑：我从GitHub下载了最新的ReactJS（v0.13.0 - alpha）并构建了它。如果您使用 transitionAppear prop（将显式设置为true），现在一切都可以正常工作。在下面，您将找到更新的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

干杯， →

Answer 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

React Component和CSSTransitionGroup

3 个答案:

用法示例