Может ли кто-нибудь помочь мне исправить анимацию отображения счетчика снизу вверх с помощью HTML и CSS? ⇐ CSS

[Anonymous]

Я работаю над гибридным проектом Blazor (веб-приложение), в котором есть компонент отображения счетчика. Этот компонент отображения счетчика будет отображать строку цифр, напоминающую реальный дисплей счетчика. Когда должно отображаться новое число, я хочу, чтобы анимация была снизу вверх, чтобы снова напоминать, как выглядит анимация отображения реального счетчика жизни.
Вот что у меня есть. . На данный момент анимации нет. цифра просто переключается:

Вот чего я пытаюсь достичь. Анимация снизу вверх:



До сих пор я пытался создать слайдер ключевого кадра, чтобы перевести новые цифры снизу вверх, переместить старую в верхнюю область и установить область overflow=hidden. Но после отладки выяснилось, что анимация не работает. Я использовал этот метод на основе руководства по созданию пользовательских ключевых кадров в Интернете и создаю его сам. Если я что-то делаю не так, дайте мне знать, или есть ли другой способ обойти эту проблему?
CurrentMeterDisplayContainer.razor

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

@rendermode InteractiveAuto
@implements IDisposable
@using System.Threading



@for (int i = 0; i < meterReading.CurrentValue.Length; i++)
{
var digit = meterReading.CurrentValue[i];





@digit



}





@code {
private CurrentMeterReadings meterReading = new CurrentMeterReadings();
private Timer timer;

protected override void OnInitialized()
{
meterReading.UpdateReading();
timer = new Timer(_ => UpdateMeter(), null, 0, 5000);
}

private void UpdateMeter()
{
meterReading.UpdateReading();
InvokeAsync(StateHasChanged);
}

public void Dispose()
{
timer?.Dispose();
}
}

CurrentMeterDisplayContainer.razor.css:

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

.meter-container {
padding: 2px;
/* height: 100%; */
background-color: #fff;
border-radius: 5px;
}

.meter-reading {
display: flex;
}

.digit-container {
/* padding: 1px; */
margin: 2px;
background-color: #fff;
border-radius: 5px;
width: 22px;
height: 40px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.digit {
font-family: "Bebas Regular";
font-size: 1.2rem;
padding: 2px;
margin: 1px;
background-color: #eeeeee;
width: 75%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}

.last-digits {
color: #EF4B4B;
}

.digit-slide-up {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
animation: slide-up 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}

Для класса модели все просто и понятно. Он имеет список целых чисел и функцию для преобразования чисел в строки.

Подробнее здесь: https://stackoverflow.com/questions/786 ... using-html