react 组件连动效果_react组件切换动画

这是基于官方文档写的一个总结，所以对于基础的ReactCSSTransitionGroup 语法没有介绍，如果想查阅基础的语法，详见文档，文档地址

ReactCSSTransitionGroup

在react中使用动画，我们需要用到ReactCSSTransitionGroup

引入方式

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6

var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm

动画原理

被ReactCSSTransitionGroup组件包裹的组件，也就是ReactCSSTransitionGroup的的children，注意，是直系孩子，在每次被添加或者被移除的时候，会被挂上相应的class。被添加的第一帧会被加上xx(transitionName)-enter，第一帧之后会再被加上xx-enter-active，被移除的第一帧会被加上xx-leave,接着是xx-leave-active。

需要注意的是，ReactCSSTransitionGroup会检测children的key，发现Key没变的时候，是不会对子组件进行类的添加的，所以，要想动画正常执行，请确保你的子组件有添加上key。

例子

下面这个例子实现了一个简单的dom切换动画，不过中间有个问题，是什么问题稍后讲，先贴代码

import React, { Component } from 'react';

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import './index.css';

class Animation extends Component {

constructor() {

super();

this.state = {

type: 0

};

this.toggle = this.toggle.bind(this);

}

toggle() {

if (this.state.type === 0) {

this.setState({

type: 1

});

} else {

this.setState({

type: 0

});

}

}

render() {

return (

animation test1

toggle

transitionName="test"

transitionEnterTimeout={500}

transitionLeaveTimeout={500}

>

{this.state.type === 0 ?

11111111111111

:

2222222222222222

}

);

}

}

export default Animation;

样式

html, body {

width: 100%;

overflow: hidden;

}

.test-enter{

transform: translateX(-200px);

opacity: 0.01;

}

.test-enter.test-enter-active {

transform: translateX(0);

opacity: 1;

transition: all 500ms ease-in-out;

}

.test-leave {

transform: translateX(0);

opacity: 1;

}

.test-leave.test-leave-active {

transition: all 500ms ease-in;

opacity: 0;

transform: translateX(300px);

}

正常情况是第一个11111111从右侧滑出，然后22222222从左侧滑入，中间不应该有互相影响，但是实际上会出现这样的效果，如下图

test1.gif

稍微注意下，会发现两个div，一个移除和另一个的加入其实是同时发生的，也就是说，动画执行过程中，并不是想象中的仅存其一，而是动画的双方并存，因此想要得到理想中的效果，需要对这两个div设置下定位，将两个div都设置为absoute定位，然后就能得到想要的切换效果

test2.gif

OK，大功告成！