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

原创
2017/08/10 15:35
阅读数 243

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

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部