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

最新推荐文章于 2024-05-12 09:30:47 发布

weixin_33868027

最新推荐文章于 2024-05-12 09:30:47 发布

阅读量527

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/cxz001/blog/1505932

版权

为什么80%的码农都做不了架构师？>>>

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

这样就完成了。

备注：