ReactJS学习笔记八:动画

原创 2015年07月06日 20:27:14

这里只讨论React的一个动画插件提供的动画机制,其他的通过自己写JS操作的动画都是一样的,和React没啥关系。

React.addons.CSSTransitionGroup 提供了一个分组动画,所谓分组动画就是指它可以对一个数组中的元素的增加和减少做一个动画。
比如我们通过一个数组来渲染一个列表,那么当列表增加或者减少的时候我们可以定义他的动画。

动画原理

React.addons.CSSTransitionGroup 的原理非常简单,通过 CSSTransitionGroup 标签来指定对一个DOM列表进行动画操作,通过 transitionName='my-animate-name' 来指定动画的名称。

当增加一项时,会自动在增加的那一项上增加两个类: {name}-enter{name}-enter-active。CSS动画执行结束之后这两个类会被删掉。其中 {name}-enter 会在 {name}-enter-active 的前一帧被加上。因此 {name}-enter 用来定义动画的初始状态,{name}-enter-active 用来定义动画的结束状态。

当减少一项时,会自动在删除之前增加一个 {name}-leave{name}-leave-active 类,这俩着的区别和前面的是一样的。

所以可以通过CSS3来写动画。

简单示例

我们来写一个简单的动画示例。显示一个学生列表,然后定时增加一条,在增加的时候使用一个fade动画。点击的时候做一个放大并渐变的消失动画:

下面是JSX代码:

  var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
  var Students = React.createClass({
    getInitialState: function() {
      return {
        students: ['amy', 'bob', 'tom', 'lucy']
      };
    },
    componentDidMount: function() {
      var self = this;
      var update = function() {
        self.setState({
          students: self.state.students.concat(["unamed-"+parseInt(Math.random()*10000000)])
        });
      }
      setInterval(update, 1000);
    },
    handleRemove: function(e) {
      var name = $(e.target).data("name");
      var index = 0;
      var students = this.state.students;
      for(var i=0;i<students.length;i++) {
        if(students[i] == name) index = i;
      }
      var state = this.state.students.splice(index, 1);
      this.setState({
        state: state
      });
    },
    render: function() {
      var s = this.state.students;
      var self = this;
      return (
        <div>
        <ReactCSSTransitionGroup transitionName="student">
        {
          s.map(function(d, i) {
            return <div className='student' key={d}>{d} <a onClick={self.handleRemove} data-name={d}>删除</a></div>
          })
        }
        </ReactCSSTransitionGroup>
        </div>
        );
    }
  });

  React.render(
    <Students />,
    document.getElementById("div1")
    );

下面是css代码:

.student {
    float: left;
    margin: 20px;
  }
  .student-enter {
    opacity: .2;
    transition: opacity 1s;
  }
  .student-enter-active {
    opacity: 1;
  }
  .student-leave {
    transform: scale(1);
    opacity: 1;
    transition: all .5s ease-in;
  }
  .student-leave-active {
    transform: scale(5);
    opacity: 0;
  }
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

React学习之扩展动画(三十)

React为动画提供一个ReactTransitonGroup插件组件作为一个底层的动画API,一个ReactCSSTransitionGroup来简单地实现基本的CSS动画和过渡。1.高级组件:Re...

ReactJS学习系列课程(React 动画使用)

常用Angular的开发者,一定熟悉angular的Animation的使用,其实React的动画效果原理和Angular是极其相似的。首先,我么需要导入一个额外的库(Angular也一样哦), 下面...

React实现动画效果

流畅、有意义的动画对于移动应用用户体验来说是非常必要的。和React Native的其他部分一样,动画API也还在积极开发中,不过我们已经可以联合使用两个互补的系统:用于全局的布局动画LayoutAn...

React Native开发之动画(Animations)

博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解 另外,我...

React学习笔记(7)---动画效果实现

1. 网页动画 在react中使用CSS3动画效果: .example-enter{ opacity...
  • thystar
  • thystar
  • 2015年08月30日 00:37
  • 1343

React动画之react-transition-group使用

代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步写在开头的话这其实是对react-transition-group文档的翻译。但是在其中夹杂了很多自己的...

React中使用CSSTransitionGroup插件实现轮播图

动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦。今天呢,我就在这里介绍一个试用react-addons-css-transition...

react的动画ReactCSSTransitionGroup

react的动画用法   ReactCSSTransitionGroup     项目中安装 npm install --save -dev react-addons-css-transitio...

《游戏脚本的设计与开发》-(RPG部分)3.7 战斗系统之自动战斗(一)

所谓自动战斗系统就是战斗从开始到结束无需任何操作,其实自动战斗的胜负结果在战斗开始的时候已经决定了,战斗的画面只是还用来显示或者说回放这一战斗的过程,这种战斗方式开发成本较低,而且因为不用长时间的操作...

React-动画详解

动画可以让用户体验变得更加流畅自然,而React的TransitionGroup插件配合CSS3可以让我们在项目中整合动画效果的变得易如反掌。 通常情况下,浏览器中的动画都拥有一套极其命令式的API...
  • limm33
  • limm33
  • 2016年03月21日 17:41
  • 1982
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactJS学习笔记八:动画
举报原因:
原因补充:

(最多只允许输入30个字)