React實現(xiàn)過渡效果更新時間展示功能
更新時間：2024年07月29日 09:29:23 作者：Karle
創(chuàng)建一個組件,實時展示時分秒,并且動態(tài)更新數(shù)據(jù),這篇文章主要介紹了React實現(xiàn)過渡效果更新時間展示功能,需要的朋友可以參考下
創(chuàng)建一個組件，實時展示時分秒，并且動態(tài)更新數(shù)據(jù)。
數(shù)據(jù)變化時利用過渡效果動態(tài)更新。
利用兩個元素，重疊在一個位置，以達到交替變化的效果
//創(chuàng)建秒顯示節(jié)點
<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>：用來觸發(fā)元素enter或exit
- timeout<number>：實現(xiàn)過渡的時間，ms
classNames<string>：注意是Names，不是Name。組件會依據(jù)提供的類名，進行過渡類名的拼接。（classNames='fade'->className='fade fade-enter fade-enter-active'）
- unmountOnExit<boolean>:動畫結束后是否刪除節(jié)點
<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;
}
}
}
}在組件掛載結束后開啟定時器，對時間進行更新
//定義兩個響應式變量作為秒元素的兩個節(jié)點
//定義記錄當前渲染標記，用來記錄顯示哪一個元素
//掛載后開啟定時器，每一秒都會進行數(shù)據(jù)更新，根據(jù)渲染標記，更新不同的響應式變量，起到新時間替換舊時間的動畫效果
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實現(xiàn)過渡效果更新時間展示功能的文章就介紹到這了,更多相關React過渡效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于解決webpack -p壓縮打包react報語法錯誤的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
react.js使用webpack搭配環(huán)境的入門教程
本文主要介紹了react 使用webpack搭配環(huán)境的入門教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
使用React?Redux實現(xiàn)React組件之間的數(shù)據(jù)共享
在復雜的React應用中,組件之間的數(shù)據(jù)共享是必不可少的,為了解決這個問題,可以使用React?Redux來管理應用的狀態(tài),并實現(xiàn)組件之間的數(shù)據(jù)共享,在本文中,我們將介紹如何使用React?Redux實現(xiàn)Count和Person組件之間的數(shù)據(jù)共享,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了模塊化react-router配置方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
React+TypeScript+webpack4多入口配置詳解
這篇文章主要介紹了React+TypeScript+webpack4多入口配置詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
從零搭建Webpack5-react腳手架的實現(xiàn)步驟(附源碼)
本文主要介紹了從零搭建Webpack5-react腳手架的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了react源碼合成事件深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01![詳解react-webpack2-熱模塊替換[HMR]](http://img.jbzj.com/images/xgimg/bcimg7.png)
這篇文章主要介紹了詳解react-webpack2-熱模塊替換[HMR]， 小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
自定義組件的時候往往需要傳?children,由于寫法比較多樣,我就總結了一下,要自定義的組件其中包含一個?title?和一個?children,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
react開發(fā)中如何使用require.ensure加載es6風格的組件
本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風格的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05