react实现动画电子倒计时组件

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实现动画电子倒计时组件相关推荐

react native 动画组件（Animated）浅析
简述 react native封装了两个易于使用的动画组件.用于全局的布局动画LayoutAnimation,和用于创建更精细的交互控制的动画Animated.本章主要对Animated组件进行简单的 ...
[React Native] 动画 · Animated
[React Native] 动画 · Animated 如果要在一个 React Native 应用中添加动画效果,首先考虑的就是官方提供的 Animated .通过定义输入和输出的动画状态值,调用 ...
React Native 动画（Animated）笔记
学习笔记--方便下次查看大多数情况下,在 React Native 中创建动画是推荐使用 Animated API 的,其提供了三个主要的方法用于创建动画: 1.API Animated.timin ...
React Native动画入门全解析
动画 React Native 提供了两个互补的动画系统: 用于创建精细的交互控制动画Animated 用于全局的布局动画LayoutAnimation Animated Animated通过 **. ...
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入一.创建动画控制器二.创建动画三.创建动画作用的组件四.创建 AnimatedBuilder 关联动画与组件五.动画运行六.完整代码示例 ...
React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
react循环setstate_react -- 关于兄弟组件触发更新的问题
大家在用react的时候,应该都知道react的state更新会由父到子逐级更新的事情,那么就会有这样一个问题,当要渲染的页面元素较多,极端情况下,特别是大数据展示的时候,由顶层一点点逐级渲染,性能消 ...
vue 倒计时插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
vue 滚动条_轻量级 React.js 虚拟美化滚动条组件RScroll
前几天有给大家分享一个Vue自定义滚动条组件VScroll.今天再分享一个最新开发的React PC端模拟滚动条组件RScroll. vue+pc桌面端模拟滚动条组件VScroll rscroll 一 ...
react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件
Daifee-React-Component 用 React 封装一套常用组件所有组件都是 stateless 组件,但为方便,某些组件提供 API 调用方式的静态方法. [TOC] 使用前须知源 ...

react实现动画电子倒计时组件

react实现动画电子倒计时组件相关推荐

最新文章

热门文章