1. 首页
  2. 问题
  3. React Component和CSSTransitionGroup
小编典典

React Component和CSSTransitionGroup

reactjs

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

以下是Codepens的列表：

任何帮助表示赞赏。

干杯，卢卡


阅读 272

收藏
2020-07-22

共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是为了在动态添加，删除和替换子组件时过渡它们，而不必在初始渲染时对其进行动画处理。玩这个TodoList
Codepen（从React
docs中的这个例子改编）来了解我的意思。列表项在添加和删除时会淡入和淡出，但不会在初始渲染时淡入。

编辑
：最近引入了一个新的“出现”过渡阶段，以允许在安装时使用动画效果。有关详细信息，请参见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;
}
2020-07-22