Почему мой переход CSS не смог реализовать ожидаемое скольжение? ⇐ CSS

[Anonymous]

Я пытаюсь создать очень простой проект времени отображения для отработки своих навыков кодирования, основная логика реализации завершена, но есть небольшая проблема: я хочу реализовать необычный способ, позволяющий цифре скользить с анимацией. эффект, но не получилось
Основная часть заключается в следующем

Код: Выделить всё

/src/components/DigitDisplay.tsx

Код: Выделить всё

"use client";

interface Props {
numberString: string;
}

const digits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
const digitRegexp = /\d/;

export default function DigitDisplay(props: Props) {
const { numberString } = props;

return (

{numberString.split("").map((str, index) => (

{digitRegexp.test(str) ? (

{digits.map((digit, index) => (
{digit}
))}

) : (
{str}
)}

))}

);
}

Код: Выделить всё

/src/page.tsx

Код: Выделить всё

"use client";
import DigitDisplay from "./components/DigitDisplay";
import { useEffect, useMemo, useState } from "react";

export default function Home() {
const [time, setTime] = useState(Date.now());
useEffect(() => {
setInterval(() => {
setTime(Date.now());
}, 1000);
}, []);

const timeStr = useMemo(() => {
return new Date(time).toLocaleTimeString();
}, [time]);
return (



);
}

Код: Выделить всё

global.css

Код: Выделить всё

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
--background: #feffff;
--foreground: #171717;
}

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}

body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: #ddd;
}

.digit-wrapper {
width: 24px;
height: 32px;
font-size: 24px;
line-height: 32px;
background: black;
position: relative;
border-radius: 6px;
margin-right: 12px;
text-align: center;
overflow: hidden;
&:last-child {
margin-right: 0;
}
}

.digit-list {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}

.display-group {
display: flex;
align-items: center;
color: white;
user-select: none;
}

.bouncy-button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
animation: moveUpDown 1s infinite;
}

Я пробовал много способов проверить, что-то не так с моим кодом или с моим неправильным способом использования TailwindCSS (я новичок в этом), но не нашел возможной ошибки, которая была немного раздражает, может кто-нибудь помочь с отладкой?

Подробнее здесь: https://stackoverflow.com/questions/792 ... ed-sliding