闪烁文本如果复选框被选中为真

Question

我正在尝试创建当用户在索引页面紧急列中选中复选框到 yes(true) 时需要闪烁文本，例如紧急 但不幸的是，我尝试了几种方法但没有成功。 到目前为止，这是我所做的

@if (Model.Count() > 0)
    {
        <table class="table table-bordered table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>
                        Doctor Full Name - CODE
                    </th>

                    <th>
                        Patient Full Name
                    </th>
                    <th>
                        Date and Time
                    </th>
                    <th>
                        Emergency
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var obj in Model)
                {
                    <tr>
                        <td width="25%">@obj.Doctor.Firstname @obj.Doctor.Lastname @obj.Doctor.Code</td>
                        <td width="25%">@obj.Patient.FirstName @obj.Patient.LastName</td>
                        <td width="25%">@obj.DateAndTime</td>
                        @if(obj.Emergency == true)
                        {
                            <span class="blink_me">Emergency</span>
                        }


                        <td class="text-center">
                            <div class="w-75 btn-group" role="group">
                                <a asp-route-Id="@obj.Id" asp-action="Upsert" class="btn btn-primary mx-2">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a asp-route-Id="@obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
                                    <i class="far fa-trash-alt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
    else
    {
        <p> No Admission Patient exists.</p>
    }


@section Scripts{
    <script>
        (function blink() {
            $('.blink_me').fadeOut(500).fadeIn(500, blink);
        })();
    </script>
}

我在这里发布图片以查看发生了什么以及我正在寻找的示例

DEMO

知道我做错了什么吗？

Answer 1

使用这个 CSS：

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

和html：

<tbody>
                @foreach (var obj in Model)
                {
                    string fadinOutClass = "";
                    <tr>
                        <td width="25%">@obj.Doctor.Firstname @obj.Doctor.Lastname @obj.Doctor.Code</td>
                        <td width="25%">@obj.Patient.FirstName @obj.Patient.LastName</td>
                        <td width="25%">@obj.DateAndTime</td>
                        @if(obj.Emergency == true)
                        {
                            fadinOutClass="elementToFadeInAndOut";
                        }


                        <td class="text-center">
                            <div class="w-75 btn-group" role="group">
                                <a asp-route-Id="@obj.Id" asp-action="Upsert" class="btn btn-primary mx-2 @fadinOutClass">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a asp-route-Id="@obj.Id" asp-action="Delete" class="btn btn-danger mx-2 @fadinOutClass">
                                    <i class="far fa-trash-alt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                }
            </tbody>

您希望 Flash 做什么？根据我给你的代码，按钮会闪烁