如何在 blazor 中的 x 秒后隐藏 div？

Question

我有一个 div 有一条消息：

@if (alertMessageShow)
{
    <div class="alert alert-success" style="margin-left: 50px"> Your changes have been saved </div>
}

@code {
    bool alertMessageShow = false;
}

当用户在页面上编辑内容时，

alertMessageShow 将设置为 true。

我遇到的问题是我不知道如何让警告消息在例如 5 秒后消失。

我试过设置计时器，然后将已用时间设置为 alertmessageshow 到 false，但这似乎不起作用。

我一直收到 InvalidOperationException。

这是我到目前为止尝试过的方法：

void alertMessage()
    {
        alertMessageShow = true;

        Timer _timer = new Timer();
        _timer.Interval = 5000;
        _timer.Elapsed += AlertTimerElapsed;

        _timer.Start();
        
    }

    private void AlertTimerElapsed(Object source, ElapsedEventArgs e)
    {
        alertMessageShow = false;
    }

所以一旦alertMessage函数被调用，它会将变量设置为true，然后创建一个新的timer实例5秒，然后在elapsed时，它会把它改回false。

按钮

<RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Nani" Click="@alertMessage" />

Answer 1

这里不需要Timer（需要Disposed一个Timer）

async Task ButtonClick()
{
   alertMessageShow = true;

   // when the Button has to do something else, add the next lines
   await task.Delay(1);
   // do some (async) work here
   StateHasChanged();

   // make sure the alert shows for a bit
   await task.Delay(5000);    
   alertMessageShow = false;
}

Answer 2

以下代码片段演示了如何显示模式 div 以及如何隐藏它。请注意，Timer 对象的使用不是必需的，可能会被认为过于熟练。

复制并测试：

@page "/"

@if (alertMessageShow)
{

    <div class="alert alert-success" style="margin-left: 50px">@message</div>
}

<button type="button" @onclick="Save">Save Update</button>
@code {
    private bool alertMessageShow = false;
    private string message;

    private async Task Save()
    {
        message = "Saving update...";
        alertMessageShow = true;

        // Simulate saving operation, say, to a database. In a real world application the duration of
        // the delay is determined by the operation itslef; in other words, you do not use the line below
        await Task.Delay(5000);     

        message = "Updates saved...";
        await InvokeAsync(() => StateHasChanged());  
      
        // Wait 3 seconds for the user to read the message, and then close the modal
        await Task.Delay(3000);
       

        alertMessageShow = false;


    }
}

注意：我建议您使用 toast 通知模式对话框进行此类操作。看看 chrissainty 是怎么做的...

Answer 3

在 3 秒后显示，然后在纯 css.. 中自动隐藏以供将来参考。 Tooltip.razor

<style>
    .tooltip-wrapper {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
        cursor: help;
    }

    .more-tool-tip-span {
        position: absolute;
        width: 120px;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
        background-color: #363636;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        z-index: 1;
        height: fit-content;
       
        animation-fill-mode: forwards;
        visibility: hidden;
        opacity:0;
    }

    .tooltip-wrapper:hover .more-tool-tip-span {
         -webkit-animation: fadeIn 3s ease normal;
    }

    @@keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            visibility: visible;
            opacity: 1;
        }
    }
</style>
@if (TooltipPosition == Position.Top)
{
    <style>
        .more-tool-tip-span::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }
    </style>
}
<div class="tooltip-wrapper">

    <span style="@postCss" class="more-tool-tip-span">@Text</span>
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public string Text { get; set; }
    Position pos = Position.Bottom;
    [Parameter]
    public Position TooltipPosition
    {
        get { return pos; }
        set
        {
            pos = value;
            switch (value)
            {
                case Position.Bottom:
                    postCss.Add(Cp.Top, "100%");
                    postCss.Add(Cp.Bottom, "0px");
                    break;
                case Position.Right:
                    postCss.Add(Cp.Top, "50%");
                    postCss.Add(Cp.Bottom, "50%");
                    postCss.Add(Cp.Left, "100%%");
                    break;
                case Position.Left:
                    postCss.Add(Cp.Top, "50%");
                    postCss.Add(Cp.Bottom, "50%");
                    postCss.Add(Cp.Left, "0px");
                    postCss.Add(Cp.Right, "5%");
                    postCss.Add(Cp.Margin_Right, "100%");
                    postCss.Add(Cp.Margin_Left, "auto");
                    break;
            }
        }
    }
    StylerCode.Css.Css postCss = new StylerCode.Css.Css();
    public enum Position
    {
        Top,
        Left,
        Bottom,
        Right,
    }
}

如何在 blazor 中的 x 秒后隐藏 div？

How can I hide a div after x seconds in blazor?

c#

timer

blazor