代码之家 › 专栏 › 技术社区 › rittergig

当值发生变化时,在几秒钟内动画/播放瞬变最简单的方法是什么?

blazor-server-side css-transitions blazor css c#

rittergig · 技术社区 · 1 年前

在我的Blazor Server应用程序中,我有标签,我想在值更改后播放动画(可能会闪烁)几秒钟。值更改将作为异步UI事件处理程序的结果触发。目标是让用户注意到更改后的值。

简单代码:

<div>
  <span id="labelThatShouldBeBlinkingOnValueChange" class="">@myValue</span>
</div>

我该如何实现这个目标?也许在Blazor组件中添加一个C#计时器高亮显示类?还是我必须编写JavaScript/TypeScript?这在纯CSS中可能吗?

我正在寻找一个简单的解决方案(尽可能少的代码),以保持我的UI代码和组件逻辑代码的干净。

0 回复 | 直到 1 年前

Henk Holterman 1 年前

string blinkClass = "";

async Task UpdateValue(string value)
{
   blinkClass = "blink";
   myValue = value;
   await task.Delay(2_000);  // 2 sec
   blinkClass = "";  
}

然后在标记中

<div>
  <span id="labelThatShouldBeBlinkingOnValueChange" class="@blinkClass">@myValue</span>
</div>

看见 here 对于 .blink CSS。现在可以省略--webkit的内容。

推荐文章

Ancross · 为什么我的小CSS动画不会触发?

2 年前

Jorge · :before和:after伪元素以接收过渡效果

6 年前

Arsalan Khattak · 线性渐变过渡

6 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

6 年前

Paul · 悬停时变换比例不缩放

6 年前

Willem van der Veen · CSS转换结合JS clickEvent

6 年前

Shanmugaraja_K · 在切换按钮中添加动画

6 年前

klode · 使用伪元素更改css转换类

6 年前

SmallTown NE · 为什么带转换的转换会导致整个页面重新绘制?

6 年前

Run · 如何使用动画限制每行的项目?

6 年前