突然要实现个数字滚动效果，网上一搜，一大堆都是用组件的。我只是想实现个简单的效果而已，决定还是自己搞搞吧。
先来看看效果吧
也不多说了，实现起来不难，但是有点细节问题需要自己好好琢磨一下
大概思路，
1.一开始为0，获取第一次数据，记录下来
2.和前一次数据进行对比
3.然后transform
4.最后收工
好了，附上代码、
export default class Number extends React.Component { constructor(props) { super(props); this.state = { prev: "000000",//初始化6位数 next: "000000", inits: 0, listAll: [[0],[0],[0],[0],[0],[0]], contrlAnimationWay: false } this.key1 = 0 } componentWillUnmount() { } componentDidMount() { setTimeout(()=>{ this.run() }) // this.setTimer() } // 获取数据 getNumber() { let { inits } = this.state let random = Math.floor(Math.random() * (100000 - 1) + 1); let prev = this.addZero(inits, 6) let next = this.addZero(inits + 1235, 6) this.setState({ inits: inits + 1235 }) console.log(99, prev); console.log(99, next); this.getData(prev, next) } // 数字补零 addZero(num, n) { let len = num.toString().length; while (len < n) { num = "0" + num; len++; } return num; } // 对比数据前后变化 getData(prev, next) { let { listAll } = this.state listAll = []; let prevArray = prev.toString().split(""); let nextArray = next.toString().split(""); console.log(11, prevArray); console.log(22, nextArray); let listInit = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (let i = 0; i < prevArray.length; i++) { let prevNumber = parseInt(prevArray[i]); let nextNumber = parseInt(nextArray[i]); let start = -1; let end = -1; for (let j = 0; j < listInit.length; j++) { if (listInit[j] === prevNumber) { start = j; } if (start !== -1 && listInit[j] === nextNumber) { end = j; break; } } listAll.push(listInit.slice(start, end + 1)); console.log(listAll); } this.setState({ listAll }) } run() { this.getNumber() this.key1++ } setTimer() { setInterval(() => { setTimeout(()=>{ this.run() }, 0); }, 1000 * 4) } render() { let { listAll } = this.state; return <div className="new-tmall911"> {/* 数字滚动 */} <div className="box-number"> <div onClick={this.setTimer.bind(this)}>累计</div> { listAll.map((list, i) => { return <div key={i} className="list-wrap"> <div className={`roll roll_${list.length - 1}`} key={this.key1++}> { list.map((item, index) => { return <div key={index}> {item} </div> }) } </div> </div> }) } <div>人已参与</div> </div> {/* 数字end */} </div> } }
css
/* 数字滚动 */ .box-number { /* background: green; */ display: flex; flex-direction: row; justify-content: center; align-items: center; color: rgb(36, 35, 35); height: 100px } .list-wrap { height: 3rem; width: 3rem; text-align: center; overflow: hidden; margin: 0.1rem; border: 2px rgb(19, 19, 18) solid; border-radius: 2px; } .roll div { font-size: 2rem; line-height: 3rem; } .roll_1 { -webkit-animation: roll_1 2s forwards; /* Safari 与 Chrome */ } .roll_2 { -webkit-animation: roll_2 2s forwards; /* Safari 与 Chrome */ } .roll_3 { -webkit-animation: roll_3 2s forwards; /* Safari 与 Chrome */ } .roll_4 { -webkit-animation: roll_4 2s forwards; /* Safari 与 Chrome */ } .roll_5 { -webkit-animation: roll_5 2s forwards; /* Safari 与 Chrome */ } .roll_6 { -webkit-animation: roll_6 2s forwards; /* Safari 与 Chrome */ } .roll_7 { -webkit-animation: roll_7 2s forwards; /* Safari 与 Chrome */ } .roll_8 { -webkit-animation: roll_8 2s forwards; /* Safari 与 Chrome */ } /*省略roll_2——roll_8*/ .roll_9 { -webkit-animation: roll_9 2s forwards; /* Safari 与 Chrome */ } @-webkit-keyframes roll_1 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -3rem, 0); } } @-webkit-keyframes roll_2 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -6rem, 0); } } @-webkit-keyframes roll_3 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -9rem, 0); } } @-webkit-keyframes roll_4 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -12rem, 0); } } @-webkit-keyframes roll_5 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -15rem, 0); } } @-webkit-keyframes roll_6 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -18rem, 0); } } @-webkit-keyframes roll_7 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -21rem, 0); } } @-webkit-keyframes roll_8 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -24rem, 0); } } @-webkit-keyframes roll_9 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -27rem, 0); } }