超简单的React动画

#1

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

demo
strip600×777

指针旋转

  • 让针转起来，这个操作比较简单，直接给指针设置一个新的角度，配合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;
}

参考文档

兼容低端浏览器

  • 不兼容，爱咋咋地吧。

项目代码地址

1 Like