React实现过渡效果更新时间展示功能

更新时间：2024年07月29日 09:29:23 作者：Karle

创建一个组件,实时展示时分秒,并且动态更新数据,这篇文章主要介绍了React实现过渡效果更新时间展示功能,需要的朋友可以参考下

利用两个元素，重叠在一个位置，以达到交替变化的效果

//创建秒显示节点
<div className="text second">
	<CSSTransition
		in="{renderSecond}"
		timeout="{1000}"
		classNames="fade"
		unmountOnExit="{!renderSecond}"
	>
		{() =>
		<div className="fade">{secondeA}</div>
		}
	</CSSTransition>
	<CSSTransition
		in="{!renderSecond}"
		timeout="{1000}"
		classNames="fade"
		unmountOnExit="{renderSecond}"
	>
		{() =>
		<div className="fade">{secondeB}</div>
		}
	</CSSTransition>
</div>

利用官方提供的过渡动画库react-transition-group

文档地址https://reactcommunity.org/react-transition-group/https://reactcommunity.org/react-transition-group/

使用了CSSTransition组件构建过渡动画

in<boolean>：用来触发元素enter或exit
timeout<number>：实现过渡的时间，ms
classNames<string>：注意是Names，不是Name。组件会依据提供的类名，进行过渡类名的拼接。（classNames='fade'->className='fade fade-enter fade-enter-active'）
unmountOnExit<boolean>:动画结束后是否删除节点

<CSSTransition
    in={renderMinute}
    timeout={1000}
    classNames="fade"
    unmountOnExit={!renderMinute}
>
    {() => <div className="fade">{minuteA}</div>}
</CSSTransition>

//将两个元素重叠在一个位置
//对类fade-enter,fade-enter-active,fade-exit,fade-exit-active进行动画编写
.text {
	position: relative;
	width: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	.fade {
		position: absolute;
		&-enter {
			transform: translateY(-20px);
			opacity: 0;
			&-active {
				transform: translateY(0);
				opacity: 1;
				transition: all 0.8s ease-out;
			}
		}
		&-exit {
			transform: translateY(0);
			opacity: 0.5;
			&-active {
				transform: translateY(20px);
				opacity: 0;
				transition: all 0.6s ease-in;
			}
		}
	}
}

在组件挂载结束后开启定时器，对时间进行更新

//定义两个响应式变量作为秒元素的两个节点
//定义记录当前渲染标记，用来记录显示哪一个元素
//挂载后开启定时器，每一秒都会进行数据更新，根据渲染标记，更新不同的响应式变量，起到新时间替换旧时间的动画效果
const AnimatedText = () => {
	const [secondeA, setSecondeA] = useState<string>(dayjs().format('ss'))
	const [secondeB, setSecondeB] = useState<string>(dayjs().format('ss'))
	const [renderSecond, setRenderSecond] = useState<boolean>(true)
	const renderSecondRef = useRef<boolean>(true)
	useEffect(() => {
		const interval = setInterval(() => {
			if (!renderSecondRef.current) {
				setSecondeA(dayjs().format('ss'))
			} else {
				setSecondeB(dayjs().format('ss'))
			}
			setRenderSecond(a => {
				renderSecondRef.current = !a
				return !a
			})
		}, 1000)
		return () => clearInterval(interval)
	}, [])
}

import { useState, useEffect, useRef } from 'react'
import { CSSTransition } from 'react-transition-group'
import './test.less'
import dayjs from 'dayjs'
const AnimatedText = () => {
	const [secondeA, setSecondeA] = useState<string>(dayjs().format('ss'))
	const [secondeB, setSecondeB] = useState<string>(dayjs().format('ss'))
	const [renderSecond, setRenderSecond] = useState<boolean>(true)
	const renderSecondRef = useRef<boolean>(true)
	const [minuteA, setMinuteA] = useState<string>(dayjs().format('mm'))
	const [minuteB, setMinuteB] = useState<string>(dayjs().format('mm'))
	const [renderMinute, setRenderMinute] = useState<boolean>(true)
	const renderMinuteRef = useRef<boolean>(true)
	const [hourA, setHourA] = useState<string>(dayjs().format('HH'))
	const [hourB, setHourB] = useState<string>(dayjs().format('HH'))
	const [renderHour, setRenderHour] = useState<boolean>(true)
	const renderHourRef = useRef<boolean>(true)
	useEffect(() => {
		const interval = setInterval(() => {
			if (!renderSecondRef.current) {
				setSecondeA(dayjs().format('ss'))
			} else {
				setSecondeB(dayjs().format('ss'))
			}
			setRenderSecond(a => {
				renderSecondRef.current = !a
				return !a
			})
		}, 1000)
		return () => clearInterval(interval)
	}, [])
	useEffect(() => {
		const interval = setInterval(() => {
			if (dayjs().format('ss') !== '00') return
			if (!renderMinuteRef.current) {
				setMinuteA(dayjs().format('mm'))
			} else {
				setMinuteB(dayjs().format('mm'))
			}
			setRenderMinute(a => {
				renderMinuteRef.current = !a
				return !a
			})
		}, 1000)
		return () => clearInterval(interval)
	}, [])
	useEffect(() => {
		const interval = setInterval(() => {
			if (dayjs().format('mm') !== '00') return
			if (!renderHourRef.current) {
				setHourA(dayjs().format('HH'))
			} else {
				setHourB(dayjs().format('HH'))
			}
			setRenderHour(a => {
				renderHourRef.current = !a
				return !a
			})
		}, 1000)
		return () => clearInterval(interval)
	}, [])
	return (
		<>
			<div className="area">
				<div className="text hour">
					<CSSTransition
						in={renderHour}
						timeout={1000}
						classNames="fade"
						unmountOnExit={!renderHour}
					>
						{() => <div className="fade">{hourA}</div>}
					</CSSTransition>
					<CSSTransition
						in={!renderHour}
						timeout={1000}
						classNames="fade"
						unmountOnExit={renderHour}
					>
						{() => <div className="fade">{hourB}</div>}
					</CSSTransition>
				</div>
				<div className="text">:</div>
				<div className="text minute">
					<CSSTransition
						in={renderMinute}
						timeout={1000}
						classNames="fade"
						unmountOnExit={!renderMinute}
					>
						{() => <div className="fade">{minuteA}</div>}
					</CSSTransition>
					<CSSTransition
						in={!renderMinute}
						timeout={1000}
						classNames="fade"
						unmountOnExit={renderMinute}
					>
						{() => <div className="fade">{minuteB}</div>}
					</CSSTransition>
				</div>
				<div className="text">:</div>
				<div className="text second">
					<CSSTransition
						in={renderSecond}
						timeout={1000}
						classNames="fade"
						unmountOnExit={!renderSecond}
					>
						{() => <div className="fade">{secondeA}</div>}
					</CSSTransition>
					<CSSTransition
						in={!renderSecond}
						timeout={1000}
						classNames="fade"
						unmountOnExit={renderSecond}
					>
						{() => <div className="fade">{secondeB}</div>}
					</CSSTransition>
				</div>
			</div>
		</>
	)
}
export default AnimatedText

.area {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	.text {
		position: relative;
		width: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		.fade {
			position: absolute;
			&-enter {
				transform: translateY(-20px);
				opacity: 0;
				&-active {
					transform: translateY(0);
					opacity: 1;
					transition: all 0.8s ease-out;
				}
			}
			&-exit {
				transform: translateY(0);
				opacity: 0.5;
				&-active {
					transform: translateY(20px);
					opacity: 0;
					transition: all 0.6s ease-in;
				}
			}
		}
	}
}

到此这篇关于React实现过渡效果更新时间展示功能的文章就介绍到这了,更多相关React过渡效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React Hook - 自定义Hook的基本使用和案例讲解
自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性，这篇文章主要介绍了React类组件和函数组件对比-Hooks的介绍及初体验,需要的朋友可以参考下
2022-11-11
react组件从搭建脚手架到在npm发布的步骤实现
这篇文章主要介绍了react组件从搭建脚手架到在npm发布的步骤实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
React中使用Axios进行HTTP请求
这篇文章主要为大家展示了如何在 React 中使用 Axios 进行 HTTP 请求,包括 GET 和 POST 请求的使用,感兴趣的小伙伴可以跟随小编一起学习一下
2024-11-11
每天一个hooks学习之useUnmount
这篇文章主要为大家介绍了每天一个hooks学习之useUnmount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
react hooks深拷贝后无法保留视图状态解决方法
这篇文章主要为大家介绍了react hooks深拷贝后无法保留视图状态解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
React替换传统拷贝方法的Immutable使用
Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用
2023-02-02
react + vite + ts项目中优雅使用.svg文件
这篇文章主要为大家介绍了react + vite + ts项目中优雅使用.svg文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
React18新特性startTransition详解
React18的新特性startTransition主要是为了优化用户体验,通过标记低优先级的更新任务,如页面重渲染,使它们不会阻塞高优先级的紧急任务如用户输入响应,本文介绍React18新特性startTransition,感兴趣的朋友跟随小编一起看看吧
2024-09-09
React组件里this指向了undefined原理解析
这篇文章主要为大家介绍了React组件里this指向了undefined原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
react中用less的问题
本文主要介绍了react中用less的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2024-04-04