2

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.

rittergig
  • 715
  • 1
  • 5
  • 16
  • Have you looked at using CSS animation? – A Haworth Mar 07 '23 at 06:43
  • @AHaworth Not exactly. Yes I want to use CSS animation. But the point is, that I have to add and remove the CSS class again (after some seconds) by program logic. So I am looking for the best and clean way how to implement it. JavaScript or via CodeBehind (see suggestion of @"H H"). – rittergig Mar 07 '23 at 15:14

1 Answers1

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.

H H
  • 263,252
  • 30
  • 330
  • 514
  • Is this the only way (setting and removing the class by code)? Or can I do this with pure CSS too: like saying: always adding a CSS Class and configure a trigger, that the CSS transition will be triggered by value change? – rittergig Mar 07 '23 at 15:17
  • Maybe, but I think that trigger would require JS. – H H Mar 07 '23 at 15:21