美文网首页
超简单的React动画

超简单的React动画

作者: 那个大螺丝 | 来源:发表于2019-03-14 17:31 被阅读0次

    做前端免不了要做活动转盘, 以下是个react的转盘动画例子

    demo

    指针旋转

    • 让针转起来,这个操作比较简单,直接给指针设置一个新的角度,配合css 的 transition 属性设置过度时间即可。
    // App.js
    const startStyle = {transform:`rotate(${this.state.rotate}deg)`};
    
    ....
    
    <img
      src={require('./images/start.png')}
      alt="pointer"
      className={'start'}
      style={startStyle}
      onClick={this.handleClick}
    />
    
    // App.css
    .App .start{
        transition:1000ms;
    }
    

    这种直接设置属性的方式,比较适合一直存在页面的元素。

    组件加/卸载时的动画

    • 在组件经历mount,和unmount生命周期的时候也可以设置动画,这里设置了开奖号码:##加载和卸载时候的动画。
    • 这里使用了react官方建议的组件react-transition-group
    //App.js
    <CSSTransition
      // 组件名,提供css选择器使用,必填参数,如果缺少了,程序会崩溃报错,注意这个参数带's'
      classNames='animation'
      // 组件是否展示,true为显示
      in={this.state.enable}
      // 动画持续时间,需要和css的设置保持一致
      timeout={300}
      // 当in的属性变为false之后,卸载组件,过程可设置动画
      unmountOnExit
    >
       {/*CSSTransition的子组件,必须是个函数,或者组件*/}
      <div className={'result-content'}>
        开奖号码: {this.state.number}
      </div>
    </CSSTransition>
    
    // App.css
    
    /*组件入场前的状态*/
    .animation-enter{
        transform:translateY(-20px);
        opacity:0;
    }
    
    /*组件正在入场时候的动画, all 指的是所有属性一起变化,ease-in-out 先快后慢的一种时间线*/
    .animation-enter-active{
        transform:translateY(0);
        opacity:1;
        transition:all 300ms ease-in-out;
    }
    
    /*组件出场前的动画*/
    .animation-exit {
        opacity: 1;
    }
    
    /*组件正在出场的动画*/
    .animation-exit-active {
        opacity:0;
        transform:translateY(20px);
        transition:all 300ms ease-out;
    }
    

    这种方式比较适合某些动态展示组件的过渡动画。

    列表信息变化动画

    • 列表信息动画,也是使用react-transition-group
    • 这里设置了列表新增元素和移除元素时的动画。
    // App.js
    
    {/*TransitionGroup组件可以管理一套CSSTransition,会动态给每个组件设置in属性*/}
    <TransitionGroup className={'list'}>
      {
        this.state.list.map(({item, id})=>(
          <CSSTransition
            key={id}
            timeout={500}
            classNames={'item-animated'}
            // 点击元素卸载元素
            onClick={this.handleRemove.bind(null,id)}
          >
            <p className={'item'}>{item}</p>
          </CSSTransition>
        ))
      }
    </TransitionGroup>
    
    // App.css
    
    .item-animated-enter{
        height: 0;
        opacity: 0;
        transform: translateX(-20%);
    }
    
    /*transition属性可以单独设置多个属性的动画状态,构成一个组合动画,第一个属性是 变化的属性名称,
    有两个时间的话,第一个时间是动画的延时,第二个时间是动画持续时间。最后一个是时间线参数,
    以下动画就组合成先200ms改变高度,再300ms发生右边位移*/
    .item-animated-enter-active {
        opacity: 1;
        height: 30px;
        transform: translateX(0);
        transition:height 200ms, opacity 200ms 300ms, transform 200ms 300ms ease-in-out;
    }
    
    .item-animated-exit{
        opacity: 1;
        height: 30px;
        transform: translateX(0);
    }
    
    .item-animated-exit-active{
        opacity:0;
        height:0;
        transform: translateX(20%);
        transition: opacity 300ms, transform 300ms ease-in-out, height 300ms 200ms;
    }
    
    

    参考文档

    兼容低端浏览器

    • 不兼容,爱咋咋地吧。

    项目代码地址

    相关文章

      网友评论

          本文标题:超简单的React动画

          本文链接:https://www.haomeiwen.com/subject/cdhcmqtx.html