react-transition-group动画以及数字滚动效果

1.引入

import {CSSTransition, TransitionGroup} from 'react-transition-group'

2.单个元素的动画

一个元素的显示隐藏：需要用CSSTransition将动画的元素包裹起来

<CSSTransition
  in={this.state.show} // 一个是否执行动画的标准，当in的值为true就开始执行入场动画，in的值为false就开始执行出场动画
  timeout={1000} //执行一个动画的时间1秒
  classNames='fade' //动画的class名称，为了描述具体动画做准备
  unMountOnExit //为true 代表退出的时候移除dom
  appear={true} // 为true  渲染的时候就直接执行动画，默认false，
  onEntered={(el) => {
    el.style.color='blue'   //可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
  }}
  onExited={() => {
     xxxxx   //同理，动画出场之后的回调，也可以在这里来个setState啥的操作
  }}  
  onEnter={this.onEnter}
  onEntering={this.onEntering}
  onExit={this.onExit}
  onExiting={this.onExiting}
  addEndListener={this.addaddEndListener}      
  >
  <div>hello</div>//需要动画的元素
</CSSTransition>

CSSTransition包裹的元素可以使用class的钩子函数控制动画的形式

/* 入场动画 fade-appear fade-appear-active 第一次才游泳*/
.fade-enter, .fade-appear{
　　opacity: 0;
}
.fade-enter-active, .fade-appear-active{
　　opacity: 1;
　　transition: opacity 1s ease-in;
}
.fade-enter-done{
　　opacity: 1;
}

/* 出场动画 */
.fade-exit{
　　opacity: 1;
}
.fade-exit-active{
　　opacity: 0;
　　transition: opacity 1s ease-in;
}
.fade-exit-done{
　　opacity: 0;
}

3.一组元素的动画 使用TransitionGroup

1. 注意key
2. TransitionGroup只能包裹CSSTransition组件不能识别其他元素

<TransitionGroup>
{
this.state.list.map((item, index)=>{
  return (
    <CSSTransition
      key = {item.id}
      timeout={1000}
      classNames="fade"
      unmountOnExit
      appear={true}
    >
      <div key={index}>{item}</div>
    </CSSTransition>
    )
  })
}
 </TransitionGroup>

4.数字滚动效果的实现

原理是：
每个数字由一张竖向的由0-9的图片改变位置来实现滚动，
注意千分符和小数点等其他字符串的单独处理

import React, {Component} from 'react'
import {CSSTransition, TransitionGroup} from 'react-transition-group'
import './style.scss'

class RollNumber extends Component {
  state = {
    delay: this.props.interval || 100,
    data: [],
  };
  componentDidMount(){
    this.setState(()=>({
      data: this.props.str.toString().split('')
    }))
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.str !== this.props.str && nextProps.str !== 'undefined') {
      console.log(nextProps.str.toString(),17);
      this.setState({
        data: nextProps.str.toString().split('')
      })
    }
  }
  render() {
    let {star}=this.state;
    return (
      <div
        style={{...this.props.style}}
        className="text-animation"
        ref={ref => (this.ref = ref)}
      >
        <TransitionGroup className="text-list">
          {this.state.data.map((val, index) => {
            if(!/\d/.test(val)){
              return <CSSTransition className={'nobg'} key={val+index} in={star} timeout={500}><span>{val}</span></CSSTransition>
            }
            return (
              <CSSTransition
                in={star}
                key={val+index}
                timeout={500}
                onEnter={e => {
                  e.style.backgroundPositionY=`0`
                }}
                onEntering={
                  e => {
                    e.style.backgroundPositionY=`${-22*val - 220}px`;
                    e.style.transitionProperty="background-position-y";
                    e.style.transitionDuration=`${(index+1)*this.state.delay}ms`;
                    e.style.transitionTimingFunction="ease-out"
                  }
                }
                onExiting={(e)=>{
                  e.style.display='none';
                }}
              >
                <span/>
              </CSSTransition>
            )
          })}
        </TransitionGroup>
      </div>
    )
  }
}

export default RollNumber

附赠图片

image.png