脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React过渡效果

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过渡效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js中自定义react数据验证组件实例详解

    js中自定义react数据验证组件实例详解

    我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。这篇文章主要介绍了js中自定义react数据验证组件 ,需要的朋友可以参考下
    2018-10-10
  • 基于React路由跳转的几种方式

    基于React路由跳转的几种方式

    这篇文章主要介绍了React路由跳转的几种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • 如何使用Redux Toolkit简化Redux

    如何使用Redux Toolkit简化Redux

    redux-toolkit是目前redux官方推荐的编写redux逻辑的方法，针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化，官方总结了四个特点是简易的/有想法的/强劲的/高效的，总结来看，就是更加的方便简单了
    2022-12-12
  • react路由守卫的实现(路由拦截)

    react路由守卫的实现(路由拦截)

    react不同于vue，通过在路由里设置meta元字符实现路由拦截。本文就详细的介绍一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • react子组件接收的props赋值给state的陷阱问题

    react子组件接收的props赋值给state的陷阱问题

    这篇文章主要介绍了react子组件接收的props赋值给state的陷阱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • create-react-app修改为多页面支持的方法

    create-react-app修改为多页面支持的方法

    本篇文章主要介绍了create-react-app修改为多页面支持的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React之如何在Suspense中优雅地请求数据

    React之如何在Suspense中优雅地请求数据

    Suspense 是 React 中的一个组件，直译过来有悬挂的意思，能够将其包裹的异步组件挂起，直到组件加载完成后再渲染，本文详细介绍了如何在Suspense中请求数据，感兴趣的小伙伴可以参考阅读本文
    2023-04-04
  • React实现评论的添加和删除

    React实现评论的添加和删除

    这篇文章主要为大家详细介绍了React实现评论的添加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • React性能优化系列之减少props改变的实现方法

    React性能优化系列之减少props改变的实现方法

    这篇文章主要介绍了React性能优化系列之减少props改变的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • React构建组件的几种方式及区别

    React构建组件的几种方式及区别

    这篇文章主要介绍了React构建组件的几种方式及区别，组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念来实现开发的模式文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
    2022-08-08

最新评论