英文:
What is the easiest way to animate / play a transistion for some seconds when a value changed?
问题
在我的Blazor Server应用程序中，我有一个标签，我想在值更改后的几秒钟内播放动画（也许是闪烁）。值的更改将作为异步UI事件处理程序的结果触发。目标是引起用户对更改后的值的注意。
简单的代码：
<div>
<span id="labelThatShouldBeBlinkingOnValueChange" class="">@myValue</span>
</div>
我该如何实现这个目标？也许通过在Blazor组件中使用C#计时器添加一个高亮类？或者我是否需要编写JavaScript/TypeScript？是否可以只使用纯CSS来实现这个目标？
我正在寻找一个简单的解决方案（尽量少的代码），以保持我的UI代码和组件逻辑代码的清晰。
英文:
In my Blazor Server application I have label and I want to play an animation (maybe blinking) for some seconds after the value changed. The value change will be triggered as a consequence of an async UI Event Handler. The goal is to sets the users attention to the changed value.
Simple code:
<div>
<span id="labelThatShouldBeBlinkingOnValueChange" class="">@myValue</span>
</div>
How can I achieve this goal? Maybe adding a highlighting class by a C# timer in the Blazor component? Or do I have to write JavaScript/TypeScript? Is is this possible with pure CSS?
I am looking for a simple solution (as less as possible code) in order to keep my UI Code and Component logic code clean.
答案1
得分: 1
string blinkClass = "";
async Task UpdateValue(string value)
{
blinkClass = "blink";
myValue = value;
await task.Delay(2_000); // 2 sec
blinkClass = "";
}
and then in the markup
<div>
<span id="labelThatShouldBeBlinkingOnValueChange" class="@blinkClass">@myValue</span>
</div>
See here for the .blink CSS. You can omit the --webkit stuff now.
<details>
<summary>英文:</summary>
```c#
string blinkClass = "";
async Task UpdateValue(string value)
{
blinkClass = "blink";
myValue = value;
await task.Delay(2_000); // 2 sec
blinkClass = "";
}
and then in the markup
<div>
<span id="labelThatShouldBeBlinkingOnValueChange" class="@blinkClass">@myValue</span>
</div>
See here for the .blink CSS. You can omit the --webkit stuff now.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论