快捷導(dǎo)航

React實(shí)現(xiàn)翻頁(yè)時(shí)鐘的代碼示例

更新時(shí)間：2023年08月27日 09:32:28 作者：Kakarotto

本文給大家介紹了React實(shí)現(xiàn)翻頁(yè)時(shí)鐘的代碼示例,翻頁(yè)時(shí)鐘把數(shù)字分為上下兩部分,翻頁(yè)效果的實(shí)現(xiàn)需要通過(guò)設(shè)置 position 把所有的數(shù)組放在同一個(gè)位置疊加起來(lái),文中有詳細(xì)的代碼講解,需要的朋友可以參考下

1. 布局、樣式、翻頁(yè)動(dòng)畫

翻頁(yè)時(shí)鐘把數(shù)字分為上下兩部分，翻頁(yè)效果的實(shí)現(xiàn)需要通過(guò)設(shè)置 position 把所有的數(shù)組放在同一個(gè)位置疊加起來(lái)。
翻頁(yè)時(shí)鐘的動(dòng)畫是當(dāng)前顯示時(shí)間的 up 部分向下翻轉(zhuǎn)至于屏幕垂直的位置，在這個(gè)位置需要顯示的下一個(gè)時(shí)間的 down 部分向下翻轉(zhuǎn)，這樣就實(shí)現(xiàn)了翻頁(yè)時(shí)鐘的完整動(dòng)畫。

HTML 結(jié)構(gòu)如下所示：

<div class="container">
    <ul class="flip">
        <li>
            <div class="up">
                <div class="content">0</div>
            </div>
            <div class="down">
                <div class="content">0</div>
            </div>
        </li>
        <li>
            <div class="up">
                <div class="content">1</div>
            </div>
            <div class="down">
                <div class="content">1</div>
            </div>
        </li>
    </ul>
</div>

CSS 樣式

.container {
	height: 90px;
}
.container .flip {
	position: relative;
	float: left;
	width: 60px;
	height: 100%;
	margin: 0 5px;
}
.flip li {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 80px;
	text-align: center;
	line-height: 90px;
	font-weight: bold;
	border-radius: 6px;
	perspective: 200px;
	transform-style: preserve-3d;
}
.flip li:first-child {
	z-index: 2;
}
// 設(shè)置class為up和down的高度為父元素容器的一半高度
.flip li > div {
	position: absolute;
	left: 0;
	height: 50%;
	width: 100%;
	overflow: hidden;
}
.flip .up {
	/* 改變選中軸的位置 使翻轉(zhuǎn)軸位于up、down部分的中間*/
	transform-origin: 0 100%;
	top: 0;
	border-radius: 4px;
}
.flip .down {
	/* 改變選中軸的位置 使翻轉(zhuǎn)軸位于up、down部分的中間 */
	transform-origin: 0 0;
	bottom: 0;
	border-radius: 4px;
}
.flip .content {
	position: absolute;
	width: 100%;
	border-radius: 6px;
	color: #ccc;
	background-color: #333;
	text-shadow: 0 1px 2px #000;
}
.flip .up .content {
	top: 0;
}
.flip .down .content {
	bottom: 0;
}
// 設(shè)置翻頁(yè)折痕
.flip .up::after {
	content: "";
	position: absolute;
	top: 43px;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: rgba(0, 0, 0, 0.4);
}

實(shí)現(xiàn)的3D效果如下：

2. 使用 JS 使動(dòng)畫持續(xù)翻頁(yè)

完整的翻頁(yè)時(shí)鐘為 00:00:00，需要翻頁(yè)的有 6 個(gè)部分，可以先把翻頁(yè)部分提取出單獨(dú)的組件。

1、準(zhǔn)備數(shù)據(jù)

因?yàn)樾枰獣r(shí)分秒各個(gè)翻頁(yè)部分顯示的數(shù)字范圍不同，所以這里先把數(shù)據(jù)準(zhǔn)備好。

2、封裝翻頁(yè)組件

組件接收兩個(gè)參數(shù)：1、當(dāng)前翻頁(yè)類型(時(shí)、分、秒); 2、當(dāng)前類型時(shí)間。
index 與當(dāng)前類型時(shí)間相同時(shí)，當(dāng)前元素的 class 為 active，上一個(gè)元素的 class 為 before；如果當(dāng)前元素為第一個(gè)元素，最后一個(gè)元素的class為before。