Blazor Server中值变更后触发几秒动画（如闪烁）的最简实现方案

下面提供几种极简方案，按需选择：

方案1：纯CSS + Blazor状态控制（无JS，代码最少） #

核心思路：用CSS定义闪烁动画，通过Blazor的布尔变量控制动画类的添加/移除，值变更时自动触发动画并在几秒后恢复。

步骤1：定义CSS动画 #

在组件的<style>标签或全局样式文件中添加：

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.blink-active {
  animation: blink 0.5s ease-in-out 3; /* 闪烁3次，每次0.5秒 */
}

步骤2：Blazor组件逻辑 #

<div>
  <span class="@(isBlinking ? "blink-active" : "")">@myValue</span>
</div>

@code {
  private int myValue = 0;
  private bool isBlinking;

  // 模拟异步UI事件触发值变更
  private async Task UpdateValue()
  {
    myValue += 1;
    // 触发闪烁
    isBlinking = true;
    StateHasChanged(); // 立即更新UI
    await Task.Delay(2000); // 动画持续2秒（和CSS动画时长匹配）
    isBlinking = false;
    StateHasChanged();
  }
}

这个方案完全不需要JS，逻辑和UI绑定清晰，代码量极少。

方案2：Blazor定时器控制（更灵活的时长管理） #

如果需要更精确控制动画时长，或者避免Task.Delay阻塞，可以用Blazor的定时器：

<div>
  <span class="@(isBlinking ? "blink-active" : "")">@myValue</span>
</div>

@implements IDisposable

@code {
  private int myValue = 0;
  private bool isBlinking;
  private PeriodicTimer? _timer;

  private async Task UpdateValue()
  {
    myValue += 1;
    isBlinking = true;
    StateHasChanged();

    // 3秒后关闭闪烁
    _timer = new PeriodicTimer(TimeSpan.FromSeconds(3));
    if (await _timer.WaitForNextTickAsync())
    {
      isBlinking = false;
      StateHasChanged();
      _timer.Dispose();
    }
  }

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

CSS部分和方案1一致，这个方案适合需要动态调整动画时长的场景。

方案3：纯CSS触发（无需C#逻辑，兼容性有限） #

利用CSS的内容变更检测触发动画，但仅在部分现代浏览器支持：

@keyframes blink {
  0%, 100% { background-color: transparent; }
  50% { background-color: yellow; }
}
span {
  transition: all 0.3s;
}
span::after {
  content: attr(data-value);
}
span[data-value] {
  animation: blink 0.5s 3;
}

<div>
  <span data-value="@myValue">@myValue</span>
</div>

@code {
  private int myValue = 0;

  private async Task UpdateValue()
  {
    myValue += 1;
    // 无需额外逻辑，依赖CSS检测data-value变更触发动画
  }
}

注意：这种方案依赖浏览器对属性变更的动画触发支持，兼容性不如前两种，仅适合简单测试场景。

内容的提问来源于stack exchange，提问作者rittergig