React学习笔记：使用jquery实现动画效果淡入淡出

react提供了一个过渡动画组件

react-addons-css-transition-group

，然而项目需要兼容 ie8 浏览器，最后决定使用

jquery+react-addons-transition-group

实现过渡效果。

要实现过渡效果的是一个幻灯片组件，组件代码如下：

let ReactTransitionGroup = require('react-addons-transition-group');
//主体
class Slider extends React.Component {

constructor(props) {
super(props);
this.state = {
//当前幻灯数组下标
curIndex:0
}
}

//组件挂载成功后触发定时切换幻灯
componentDidMount() {
this.slideInterval = setInterval(
() => {
let nextCurIndex = this.state.curIndex === (this.props.slides.length - 1) ? 0 : this.state.curIndex+1;
this.setState({curIndex:nextCurIndex});
},
5000
);
}

render() {
//幻灯图数组
const slides = this.props.slides;

//当前展示的图片
const curIndex = this.state.curIndex;
const curSlide = slides[curIndex];

return (
<div >
<ReactTransitionGroup component="div">
<SliderImg key={curSlide.id} litpic={curSlide.litpic} name={curSlide.name} title={curSlide.title} id={curSlide.id}/>
</ReactTransitionGroup>
</div>
);
}
}

可以看到图片部分使用了

<ReactTransitionGroup>

包裹，该组件会自动调用子组件的一些方法，你可以在这些方法里调用jquery的动画处理方法。

注意，一定要给子组件加上key，引用官网文档原文说明：

你必须为ReactCSSTransitionGroup的所有子级提供 key 属性，即使只渲染一个项目。这就是React将决定哪一个子级进入，离开，或者停留

再看一下

<SlideImg>

组件的定义

class SliderImg extends React.Component {
//ReactTransitionGroup初始子组件挂载后会触发，之后更新进来的子组件不会触发
//callback是ReactTransitionGroup传过来的，用于结束动画流程
componentWillAppear(callback) {
this.fadeInOut(callback)
}
//和上面的相反，初始的那个子组件不会触发该方法，其他的会触发
componentWillEnter(callback) {
this.fadeInOut(callback)
}

//淡入淡出效果 总时间需要和Slide组件轮播间隔差不多
fadeInOut(callback) {
//获取dom对象，通过ref设置的
let dom = this.el;
//首先淡入，用时1秒，之后创建一个定时器，3秒后再执行淡出动画，最后调用 callback
$(dom).fadeIn(1000,() => {
setTimeout(()=>{
//稍微延长淡出效果，过渡更加自然
$(dom).fadeOut(1500,()=>callback());
},3000)
});
}

render() {
const props = this.props;
return (
<a href="javascript:" className="banner_item"  key={props.id} ref={(el)=>{this.el = el}} style={{display:'none'}}>
<div className="tupian">
<img src={props.litpic} />
</div>
<span>{props.name}</span>
<i>{props.title}</i>
</a>
);
}
}

这样就完成了。

备注：

ReactTransitionGroup是动画的基础。它通过 require('react-addons-transition-group') 访问。当子级被声明式的从其中添加或移除（就像上面的例子）时，特殊的生命周期挂钩会在它们上面被调用。

componentWillAppear(callback)

对于被初始化挂载到 TransitionGroup 的组件，它和 componentDidMount() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它只会在 TransitionGroup 初始化渲染时被调用。

componentDidAppear()

在 传给componentWillAppear 的 回调 函数被调用后调用。

componentWillEnter(callback)

对于被添加到已存在的 TransitionGroup 的组件，它和 componentDidMount() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它不会在 TransitionGroup 初始化渲染时被调用。

componentDidEnter()

在传给 componentWillEnter 的回调函数被调用之后调用。

componentWillLeave(callback)

在子级从 ReactTransitionGroup 中移除时调用。虽然子级被移除了，ReactTransitionGroup 将会保持它在DOM中，直到callback被调用。

**componentDidLeave()
**
在willLeave callback 被调用的时候调用（与 componentWillUnmount 同一时间）。

详情参考: https://github.com/facebook/react/blob/v0.14.8/docs/docs/10.1-animation.zh-CN.md