时间戳

首页 > 解决方案 > blazor，task.delay，css 操作

c# - blazor，task.delay，css 操作

问题描述

我想在 blazor 中创建渐变效果，例如https://gradienta.io/editor移动角度滑块。我想通过使用 task.delay 函数来做到这一点，但只显示了 1 和 3，我在这里缺少的是 2 没有显示。最终我想把它放在一个循环中，以设置运动中的渐变。

<div class="box-size" style=@myStyle>
       @content
    </div>
}

@code {
    public string myStyle = "";
    public string content = "";

    protected override async Task OnInitializedAsync()
    {
                
        myStyle = "background-image: linear-gradient(80deg, #FF0055 0%, #000066 100%)";
        content = "1";
        await Task.Delay(5000);
        myStyle = "background-image: linear-gradient(160deg, #FF0044 0%, #000066 100%)";
        content = "2";
        await Task.Delay(5000);
        myStyle = "background-image: linear-gradient(240deg, #FF0011 0%, #000066 100%)";
        content = "3";
       

    }

标签： c#cssasync-awaitblazor

解决方案

Blazor 将在您的方法的第一个部分自动调用 StateHasChanged() await（这将呈现并显示 step1）。

然后它将在您的方法结束时再次自动调用 StateHasChanged() - 这将呈现第 3 步。

要查看第 2 步，您需要在中间额外调用 StateHasChanged()

protected override async Task OnInitializedAsync()
    {
                
        myStyle = "background-image: linear-gradient(80deg, #FF0055 0%, #000066 100%)";
        content = "1";
        await Task.Delay(5000);
        myStyle = "background-image: linear-gradient(160deg, #FF0044 0%, #000066 100%)";
        content = "2";
        StateHasChanged(); // This will render Step 2
        await Task.Delay(5000);
        myStyle = "background-image: linear-gradient(240deg, #FF0011 0%, #000066 100%)";
        content = "3";      
    }

推荐阅读