React.js 数字渐变动画 | 计数器

Number Transition，本例演示在ReactJS中如何把数据变化变成可视化动画。

react, counter

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 7224
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * Shows a number value changing over time. The goal is to visualize
 * data changing over time.
 */
class Counter extends React.Component {
  static defaultProps = {
    commas: true,
    timeout: 500,
    steps: 10
  }
  
  constructor(props) {
    super(props);
    this.state = {
      currentStep: 0,
      targetValue: props.value,
      originalValue: props.value,
      currentValue: props.value
    };
  }

componentWillUnmount(){
     clearInterval(this._interval);
  }

getValue(percent) {
    const diff = this.state.targetValue - this.state.originalValue;
    return (diff * percent) + this.state.originalValue;
  }
  
  componentWillReceiveProps(nextProps) {
    this.setState({
      currentStep: 0,
      originalValue: this.state.currentValue || 0,
      targetValue: nextProps.value || 0
    });
    clearInterval(this._interval);
    this._interval = setInterval(()=>{
      if (this.state.currentStep >= this.props.steps) {                       
        clearInterval(this._interval);
      }
      this.setState({
        currentValue: this.getValue(this.state.currentStep / this.props.steps),
        currentStep: this.state.currentStep + 1
      });
    }, this.props.timeout / this.props.steps);
  }

static commas(val) {
    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

render() {
    let value = Math.round(this.state.currentValue);
    if (this.props.commas) {
      value = Counter.commas(value);
    }
    return (
      <div className='counter'>
        {value}
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 42
    }
  }
  
  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label className='label'>
          Enter a new number...
          <input
            className='input'
            value={this.state.value}
            onChange={this.handleChange.bind(this)} />
          <div className='highlight' />
        </label>
        <Counter value={parseInt(this.state.value, 10) || 0} />
      </div>
    )
  }
}

React.render(<App />, document.getElementById('counter'));

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
body {
    font-family: "Open Sans";
    background-color: #0bba8f;
    color: #fff;
    font-weight: 300;
}
#title {
    position: fixed;
    left: 10px;
    top: 10px;
    font-size: 30px;
    font-weight: 100;
}
#counter {
    width: 100%;
    height: 280px;
    position: fixed;
    top: 50%;
    margin-top: -140px;
}
.counter {
    font-size: 200px;
    text-align: center;
}
.input {
    text-align: center;
    font-size: 20px;
    width: 100%;
    outline: 0;
    border: 0;
    line-height: 2;
    outline: 0;
    background: transparent;
    -webkit-transition: border 0.5s ease;
    transition: border 0.5s ease;
    position: relative;
    font-size: 30px;
    color: inherit;
}
.highlight {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.input:focus + .highlight {
    height: 4px;
    background: rgba(255, 255, 255, 0.58);
}
.label {
    position: relative;
    text-align: left;
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 300px;
}

HTML

Number Transition，本例演示在ReactJS中如何把数据变化变成可视化动画。

react, counter

编辑器支持Emmet

快捷键

Number Transition，本例演示在ReactJS中如何把数据变化变成可视化动画。

react, counter

React.js GIF动画图片搜索

React.js iPod交互动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：