快捷導(dǎo)航

React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能

更新時(shí)間：2024年07月29日 09:29:23 作者：Karle

創(chuàng)建一個(gè)組件,實(shí)時(shí)展示時(shí)分秒,并且動(dòng)態(tài)更新數(shù)據(jù),這篇文章主要介紹了React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能,需要的朋友可以參考下

利用兩個(gè)元素，重疊在一個(gè)位置，以達(dá)到交替變化的效果

//創(chuàng)建秒顯示節(jié)點(diǎn)
<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>

利用官方提供的過(guò)渡動(dòng)畫庫(kù)react-transition-group

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

使用了CSSTransition組件構(gòu)建過(guò)渡動(dòng)畫

in<boolean>：用來(lái)觸發(fā)元素enter或exit
timeout<number>：實(shí)現(xiàn)過(guò)渡的時(shí)間，ms
classNames<string>：注意是Names，不是Name。組件會(huì)依據(jù)提供的類名，進(jìn)行過(guò)渡類名的拼接。（classNames='fade'->className='fade fade-enter fade-enter-active'）
unmountOnExit<boolean>:動(dòng)畫結(jié)束后是否刪除節(jié)點(diǎn)

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

//將兩個(gè)元素重疊在一個(gè)位置
//對(duì)類fade-enter,fade-enter-active,fade-exit,fade-exit-active進(jìn)行動(dòng)畫編寫
.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;
			}
		}
	}
}

在組件掛載結(jié)束后開啟定時(shí)器，對(duì)時(shí)間進(jìn)行更新

//定義兩個(gè)響應(yīng)式變量作為秒元素的兩個(gè)節(jié)點(diǎn)
//定義記錄當(dāng)前渲染標(biāo)記，用來(lái)記錄顯示哪一個(gè)元素
//掛載后開啟定時(shí)器，每一秒都會(huì)進(jìn)行數(shù)據(jù)更新，根據(jù)渲染標(biāo)記，更新不同的響應(yīng)式變量，起到新時(shí)間替換舊時(shí)間的動(dòng)畫效果
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;
				}
			}
		}
	}
}

到此這篇關(guān)于React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能的文章就介紹到這了,更多相關(guān)React過(guò)渡效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: