React组件和CSSTransitionGroup

本文介绍了React组件和CSSTransitionGroup的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

与Facebook ReactJS的早期。简单的CSS淡入转换。它按照ReactJS v0.5.1的预期工作。它不与v11.1，v12.0，v12.1。这里是CSS和JSX：

CSS

  .example- {
 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

v0.11.1

v0.12.0

v0.12.1

任何帮助。 >

干杯，
Luca

解决方案

$ c> CSSTransitionGroup 用于在初始挂载时进行动画处理，但它不再是React v0.8.0左右。有关详情，请参见。一个解决方案是简单地挂载< HelloWorld>

之后的< h1> code>如下：

  / ** @ 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>你好世界< / h1>：
 null; 
 
 return（
< ReactTransitionGroup transitionName =example> 
 {child} 
< / ReactTransitionGroup> 
）; 
} 
}）; 
 
 React.render（< HelloWorld />，document.body）;

活动示例：

请注意， CSSTransitionGroup 用于在子组件动态添加，删除和替换时对子组件进行转换，而不一定是在初始渲染时对其进行动画处理。使用进行游戏（改编自）看到我的意思。

编辑。：最近已经引入了一个新的出现转换阶段，以实现装载时动画效果。有关详情，请参见。（提交已经被合并到master中，所以我想象它将与v0.12.2一起发布。）理论上，你可以这样做，使< h1> fade in on mount：

 code> ... 
< ReactTransitionGroup transitionName =exampletransitionAppear = {true}> 
< h1> Hello world< / h1> 
< / ReactTransitionGroup> 
 ...

CSS
$ b

  .example-appearing {
 opacity：0.01; 
 transition：opacity .5s ease-in; 
} 
 
 .example-appear.example-appear-active {
 opacity：1; 
}

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:

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

Here's the list of 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

Any help appreciated.

Cheers,Luca

解决方案

It looks like CSSTransitionGroup used 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/1304 for a bit more info.

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

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

Note that CSSTransitionGroup is 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.

EDIT: A new "appear" transition phase has been introduced recently to allow for animation-on-mount effects. See https://github.com/facebook/react/pull/2512 for 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:

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

这篇关于React组件和CSSTransitionGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！