C# Blazor 服務器端 CSS 使用 InvokeVoidAsync 的元素泄漏

Question

從列中刪除行時試圖破壞過渡體驗。 像 Vue/React 這樣的東西。 將 InvokeVoidAsync 調用到 append 和 class，這將執行 animation。javascript 調用還有一個睡眠調用，它將推遲實際項目在服務器端被刪除。 服務器刪除該項目后，class 將應用於其下方的項目。 將 class 附加到下一個表行UI 端的表行示例

我創建了一個 Blazor 服務器端應用程序並更新了 Index.razor 頁面，添加了幾個 js 函數和一個 css 文件。

Index.razor

@page "/"

<h2> @Pizzas.Count() Pizza's</h2>

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var pizza in Pizzas)
        {
            <tr id="@(pizza.ID)">
                <td>@pizza.Name</td>
                <td><button @onclick="@(async _ => await RemovePizza(pizza))">Remove</button></td>
            </tr>
        }
    </tbody>
</table>
@inject IJSRuntime JSRuntime
@code {
    public record Pizza(Guid ID, string Name);
    public string[] PizzaTypes => new[] { "Pepperoni", "Cheese", "Hawaiian", "Veggie", "Bacon", "Southwestern BBQ", "Cheeseburger", "Buffalo", "Meat", "Supreme" };

    public List<Pizza> Pizzas { get; set; } = new();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        try
        {
            for (int i = 0; i < 10; i++)
                AddPizza();

        }
        catch (Exception)
        {

            throw;
        }
        StateHasChanged();
    }

    public void AddPizza()
    {
        Pizzas.Add(new Pizza(Guid.NewGuid(), PizzaTypes[new Random().Next(0, PizzaTypes.Length - 1)]));
    }
    public async Task RemovePizza(Pizza pizza)
    {
        await JSRuntime.InvokeVoidAsync("animateTransition", pizza.ID, "fade-away", 1000);
        Pizzas.Remove(pizza);
    }
}

函數

var sleep = async (ms) => new Promise(resolve => setTimeout(resolve, ms));

var animateTransition = async (id, className, duration) => {
    const el = document.getElementById(id);
    el.classList.add(className);
    await sleep(duration);
};

CSS

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

tr.fade-away {
    animation-name: fadeOut;
    animation-duration: 1s;
}

Answer 1

原來我在循環中遺漏了@key 屬性。 這樣的新手錯誤。

https://blazor-university.com/components/render-trees/optimising-using-key/

更新代碼

@foreach (var pizza in Pizzas)
    {
        <tr @key="pizza" id="@(pizza.ID)">
            <td>@pizza.Name</td>
            <td><button @onclick="@(async _ => await RemovePizza(pizza))">Remove</button></td>
        </tr>
    }