How can I disalbe all button&input templately in blazor server-side?

Question

Now I have a CSS3 animation(not a full-screen animation) to show on my page.

When the animation is playing, I wanna disable all the button&input.

After the animation is finished, then enable all the button&input.

How can I achieve this? I don't want to add a boolean "IsEnabled" in each void to achieve this.

Answer 1

You could listener the animationstart and animationend event. Then, in the animationstart event, disable the button by using the "disabled" property. In the animationend event, enable the buttons.

Sample code as below:

<style> 
    #myDIV {
        margin: 25px;
        width: 550px;
        height: 100px;
        background: orange;
        position: relative;
        font-size: 20px;
    }

    /* Chrome, Safari, Opera */
    @@-webkit-keyframes mymove {
        from {
            top: 0px;
        }

        to {
            top: 200px;
        }
    }

    @@keyframes mymove {
        from {
            top: 0px;
        }

        to {
            top: 200px;
        }
    }
</style>  

<div id="myDIV" onclick="myFunction()">Click me to start the animation.</div>
<div class="btn_group">
    <input type="button" value="Submite" onclick="alert('click')" class="btn btn-info" />
    <input type="button" value="Crete" onclick="alert('crete')" class="btn btn-light" />
</div>
<script>
    var x = document.getElementById("myDIV");
      
    // Start the animation with JavaScript
    function myFunction() {
        x.style.WebkitAnimation = "mymove 4s 1"; // Code for Chrome, Safari and Opera
        x.style.animation = "mymove 4s 1";     // Standard syntax
    }

    // Code for Chrome, Safari and Opera
    x.addEventListener("webkitAnimationStart", myStartFunction);
    x.addEventListener("webkitAnimationEnd", myEndFunction);

    // Standard syntax
    x.addEventListener("animationstart", myStartFunction);
    x.addEventListener("animationend", myEndFunction);

    function myStartFunction() {
        this.innerHTML = "animationstart event occured - The animation has started";
        this.style.backgroundColor = "pink";

        //find the elements and disable them.
        var elems = document.getElementsByClassName("btn");
        for (var i = 0; i < elems.length; i++) {
            elems[i].disabled = true
        }
    }


    function myEndFunction() {
        this.innerHTML = "animationend event occured - The animation has completed";
        this.style.backgroundColor = "lightgray";
        //find the elements and enable them.
        var elems = document.getElementsByClassName("btn");
        for (var i = 0; i < elems.length; i++) {
            elems[i].disabled = false;
        }
    }
</script>

The output like this:

Answer 2

You can use javascript for this purpose.

In js you can get all elements by class and add disabled attribute to them:

document.getElementsByClassName("buttons-to-disable").disabled = true;

and to enable them:

document.getElementsByClassName("buttons-to-disable").disabled = false;

To call the js, you can use IJsRuntime