1. 這些天也都在面試，面試的內容呢，也大多千篇一律，無外乎vue、react這些框架的一些原理，和使用方法。但是呢，有一家公司的CTO在國外，沒辦法對我的技術進行審核，所以他給我發了兩套題，第一套題呢，是要使用react實現動畫倒計時小時鐘組件，父級組件通過傳遞秒、結束回調方法控制時鐘組件。

?

2. 要求：

（1）倒計時組件調用 ：

?

（2）倒計時組件內部簡單結構 ：

?

3. 思考實現過程：

?

（1）首先實現簡單的數字倒計時更改

（2）最后實現數值更改結合transition運動

?

4. 具體核心代碼實現：

?

（1）模板結構：

<div><section className="timeBox"><div className="timeBoxLineWrap"><div className="timeBoxLine" ref="timeBoxLine">{ this.state.remainingFormattedTime.split('').map((v,index,arr) => ((<div className="timeBoxLine-Box" key={index}??><span className="timeBoxLine-Box-item">{this.state.lastTime[index]}</span><span className="timeBoxLine-Box-item">{v}</span></div>))?)}</div></div></section></div>

?

（2）生命周期以及執行方法：?

import React from "react";import './time.css'export default class Countdown extends React.Component {constructor(props) {super(props);this.second = parseInt(this.props.remainingSecond);this.timer = null;this.state = { remainingFormattedTime: this.formatNumber(this.second-1), lastTime: this.formatNumber(this.second)};}componentDidMount() {//transfer timeTimerthis.timerTime();}//change timetimerTime = ()=>{this.timer = setInterval(()=>{this.compareTimeList();this.second--;if( this.second+2 === 0 ){this.listenTimeEnd();}},1000);}//Formatting a second to a time stringformatNumber = (seconds)=>{// max : 99:59:59let hour = 0;let minute = 0;let second = seconds<0 ? 0 : seconds;//If it is greater than one secondif(seconds > 59){second = seconds % 60;minute = Math.floor(seconds / 60);if( minute > 59 ){hour = Math.floor(minute / 60) > 99 ? 99 : Math.floor(minute / 60);minute = minute % 60;}}return (this.addZoom(hour)+':'+this.addZoom(minute)+':'+this.addZoom(second));}//add zoomaddZoom = (num)=>{if(num*1 > 9){return num;}else{return '0' + num;}}//time endlistenTimeEnd = ()=>{clearInterval(this.timer);this.initTimeBox();this.setState({ remainingFormattedTime: '00:00:00', lastTime: '00:00:00'});this.props.onComplete&&this.props.onComplete();}initTimeBox(){let TimeBoxItems = this.refs.timeBoxLine.children;for(var i=0;iTimeBoxItems[i].style.cssText = "transition:0s ease;transform:translateY(0);";}}//compare timecompareTimeList = ()=>{let otime = this.state.lastTime;let ctime = this.state.remainingFormattedTime;let TimeBoxItems = this.refs.timeBoxLine.children;let This = this;//clear transformfor(var i=0;iTimeBoxItems[i].index = i;TimeBoxItems[i].addEventListener('transitionend',function(){This.setState( {remainingFormattedTime: This.formatNumber(This.second) , lastTime: This.formatNumber(This.second+1) } );this.style.cssText = 'transition:0s ease;transform:translateY(0)';});}// set animationfor(var i=0;iif(otime[i] != ctime[i]){TimeBoxItems[i].style.cssText = "transition:ease 0.5s;transform:translateY(-100%);"}else{TimeBoxItems[i].style.cssText = "transition:0s ease;transform:translateY(0);";}}}// render?render() {return (//模板結構);}?}

?

5. 最需要注意的就是，數據驅動后動畫的更改，或者DOM更新后，動畫的銜接。

?

6. 組件開發結束，最終預覽效果：

?

子在川上曰，逝者如斯夫 ～?

總結

以上是生活随笔為你收集整理的react实现动画电子倒计时组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。