Blazor中对应Vue nextTick()的方案及条件渲染组件下滑动画问题

问题背景 #

当<ul>元素预挂载时，下滑动画可正常执行：

<ul @ref=@validationErrorsMessagesList>
  @foreach (string validationErrorMessage in validationErrorsMessagesCopyForAnimating)
  {
    <li @key=@validationErrorMessage>
      @validationErrorMessage
    </li>
  }
</ul>

动画通过C#调用JS互操作实现：

protected void animateErrorsMessagesListIfMust()
{
  if (this.validationErrorsMessages.Any())
  {
    this.validationErrorsMessagesCopyForAnimating = this.validationErrorsMessages.ToArray();

    // 内部通过JS互操作执行展开动画
    _ = this.javaScriptFunctionality.ExpandingAnimation.Animate(
      new JavaScriptFunctionality._ExpandingAnimation.CompoundParameter
      {
        duration__seconds = this.errorsListAnimationDuration__seconds,
        targetElement = this.validationErrorsMessagesList
      }
    ); 
  }
}

但预挂载元素可能引发样式问题，改为条件渲染后动画直接失效：

@if (mustDisplayErrorsMessagesIfAny && validationErrorsMessagesCopyForAnimating.Any())
{
  <ul @ref=@validationErrorsMessagesList>
    @foreach (string validationErrorMessage in validationErrorsMessagesCopyForAnimating)
    {
      <li @key=@validationErrorMessage>
        @validationErrorMessage
      </li>
    }
  </ul>
}

核心原因：动画触发时，条件渲染的<ul>元素还未完成DOM挂载，JS无法找到目标元素执行动画。

Blazor中的解决方案（对应Vue nextTick） #

Blazor没有直接的nextTickAPI，但可以通过生命周期钩子+状态更新确认的方式解决，以下是两种可靠方案：

1. 利用OnAfterRenderAsync生命周期钩子 #

OnAfterRenderAsync会在组件完成渲染（DOM已更新）后触发，适合在这里判断是否需要执行动画：

• 添加标记字段，标记是否需要触发动画：

private bool _shouldTriggerErrorAnimation;

• 修改动画触发方法，仅更新状态并标记需要动画：

protected void animateErrorsMessagesListIfMust()
{
  if (this.validationErrorsMessages.Any())
  {
    this.validationErrorsMessagesCopyForAnimating = this.validationErrorsMessages.ToArray();
    _shouldTriggerErrorAnimation = true;
    // 通知Blazor更新UI
    StateHasChanged();
  }
}

• 在OnAfterRenderAsync中执行动画：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (_shouldTriggerErrorAnimation && validationErrorsMessagesList.Context != null)
  {
    // 确保元素已挂载到DOM
    await this.javaScriptFunctionality.ExpandingAnimation.Animate(
      new JavaScriptFunctionality._ExpandingAnimation.CompoundParameter
      {
        duration__seconds = this.errorsListAnimationDuration__seconds,
        targetElement = this.validationErrorsMessagesList
      }
    );
    // 执行后重置标记，避免重复触发
    _shouldTriggerErrorAnimation = false;
  }
  await base.OnAfterRenderAsync(firstRender);
}

2. 手动等待DOM更新完成 #

如果不想依赖生命周期钩子，可通过InvokeAsync结合短暂等待模拟nextTick：

protected async Task animateErrorsMessagesListIfMust()
{
  if (this.validationErrorsMessages.Any())
  {
    this.validationErrorsMessagesCopyForAnimating = this.validationErrorsMessages.ToArray();
    // 通知Blazor更新UI，等待渲染完成
    await InvokeAsync(StateHasChanged);
    // 短暂等待确保DOM已挂载（时间可根据实际调整）
    await Task.Delay(1);
    // 执行动画
    await this.javaScriptFunctionality.ExpandingAnimation.Animate(
      new JavaScriptFunctionality._ExpandingAnimation.CompoundParameter
      {
        duration__seconds = this.errorsListAnimationDuration__seconds,
        targetElement = this.validationErrorsMessagesList
      }
    );
  }
}

关键注意点 #

• 必须确认ElementReference（即validationErrorsMessagesList）的Context不为null，这是元素已挂载到DOM的标志。
• 避免在状态更新后立即执行动画，必须等待Blazor完成DOM渲染。
• 第一种基于生命周期的方案更可靠，适合大多数场景；第二种手动等待的方式可作为临时解决方案，但可能受渲染性能影响。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD