作者:zhaoyunnidaye_260 | 来源:互联网 | 2023-09-16 17:24
呃呃呃,詳細這個結果是不是叫這個名,我不知道,本身起的名字詳細結果直接看這個地點,https:951565664.github.ioS…我研討了半天,也沒搞懂gif怎樣做的。空話不
呃呃呃,詳細這個結果是不是叫這個名,我不知道,本身起的名字
詳細結果直接看這個地點,https://951565664.github.io/S…
我研討了半天,也沒搞懂gif 怎樣做的。
空話不多說了。最先正題
———————————-我是分割線,線割分是我 —————————–
提早申明一下,demo的數據變化,是我隨機發生的。。而人人用到的時刻肯定是正式項目需求。那末假如值穩定,是不會render內部的。所以外層只管無節操挪用。一切動畫都是css做的,機能應該是最優的了。
Scoreboard
Install
npm install scoreboard-react --save
or
yarn install scoreboard-react --save
Usage
import Scoreboard from 'scoreboard';
Props
Props | desc | type | default |
---|
transitionDuration | 動畫的時候 | String | 0.5s |
numberStyle | 数字的款式 | Object | {} |
style | 外框的款式 | Object | {} |
Demo
D:codeSpaceScoreboardexampletest
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Scoreboard from 'scoreboard-react';
import styles from './index.less'
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
class App extends Component {
state = {
key: 2
}
changeNum = (params) => {
this.setState({
key: parseInt(Math.random() * 10) + 2
})
}
compOnentDidMount= () => {
this.timer = setInterval(this.changeNum, 1000)
}
compOnentWillMount= () => {
clearInterval(this.timer)
}
render() {
let numberStr = new Array(this.state.key).fill(1).map((item) => parseInt(Math.random() * 10)).reduce((prev, curr, index, array) => '' + prev + curr);
return (
);
}
}
ReactDOM.render(, document.getElementById('root'));
demo的數據變化,是我隨機發生的。。而人人用到的時刻肯定是正式項目需求。那末假如值穩定,是不會render內部的。所以外層只管無節操挪用。
假如人人有任何關於這個動畫擴大的需求能夠直接提的。我只管第一時候反應,畢竟我是以掙star為目標的,哈哈哈哈