React實(shí)現(xiàn)過渡效果更新時(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)過渡效果更新時(shí)間展示功能,需要的朋友可以參考下
創(chuàng)建一個(gè)組件，實(shí)時(shí)展示時(shí)分秒，并且動(dòng)態(tài)更新數(shù)據(jù)。
數(shù)據(jù)變化時(shí)利用過渡效果動(dòng)態(tài)更新。
利用兩個(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>利用官方提供的過渡動(dòng)畫庫react-transition-group
文檔地址https://reactcommunity.org/react-transition-group/https://reactcommunity.org/react-transition-group/
使用了CSSTransition組件構(gòu)建過渡動(dòng)畫
- in<boolean>：用來觸發(fā)元素enter或exit
- timeout<number>：實(shí)現(xiàn)過渡的時(shí)間，ms
classNames<string>：注意是Names，不是Name。組件會(huì)依據(jù)提供的類名，進(jìn)行過渡類名的拼接。（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)記，用來記錄顯示哪一個(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)過渡效果更新時(shí)間展示功能的文章就介紹到這了,更多相關(guān)React過渡效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Hook - 自定義Hook的基本使用和案例講解
自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取，嚴(yán)格意義上來說，它本身并不算React的特性，這篇文章主要介紹了React類組件和函數(shù)組件對(duì)比-Hooks的介紹及初體驗(yàn),需要的朋友可以參考下2022-11-11
react組件從搭建腳手架到在npm發(fā)布的步驟實(shí)現(xiàn)
這篇文章主要介紹了react組件從搭建腳手架到在npm發(fā)布的步驟實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
React中使用Axios進(jìn)行HTTP請(qǐng)求
這篇文章主要為大家展示了如何在 React 中使用 Axios 進(jìn)行 HTTP 請(qǐng)求,包括 GET 和 POST 請(qǐng)求的使用,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
每天一個(gè)hooks學(xué)習(xí)之useUnmount
這篇文章主要為大家介紹了每天一個(gè)hooks學(xué)習(xí)之useUnmount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
react?hooks深拷貝后無法保留視圖狀態(tài)解決方法
這篇文章主要為大家介紹了react?hooks深拷貝后無法保留視圖狀態(tài)解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
React替換傳統(tǒng)拷貝方法的Immutable使用
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用2023-02-02
react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件
這篇文章主要為大家介紹了react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
React18的新特性startTransition主要是為了優(yōu)化用戶體驗(yàn),通過標(biāo)記低優(yōu)先級(jí)的更新任務(wù),如頁面重渲染,使它們不會(huì)阻塞高優(yōu)先級(jí)的緊急任務(wù)如用戶輸入響應(yīng),本文介紹React18新特性startTransition,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要為大家介紹了React組件里this指向了undefined原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本文主要介紹了react中用less的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-04-04