Smooth block appearance

I have such a section of the markup (I will immediately make a reservation that the markup was not done by me, it was provided to me as a template, and you need to dance from it):

<div class="modal-view-bg">
    <div class="modal-view-container">
        <div id="login_modal" class="modal-view show-modal1 disN">
            <div class="modal-title">
                <div>LOGIN</div>
                <a href="/"><span class="modal-close"></span></a>
            </div>
            <form method="post" asp-page-handler="Login">
                <input type="email" name="Email" class="input-modal mrB20" placeholder="Email account">
                <input type="password" name="Password" class="input-modal mrB20" placeholder="Password">
                <a href="/Identity/Reset"><span class="btn-modal-text">Reset password</span></a>
                <button class="button-modal color-red">Login</button>
            </form>
        </div>
    </div>
</div>

The container with the idishnik id="login_modal" is responsible for a certain form. The appearance of this form occurs by switching the disN class to disB

.disN {
    display: none !important;
}

.disB {
    display: block !important;
}

The mechanics are that when the page loads, disN should change to disBand the form animates to appear.

I implemented this using jQuery so:

<script>
    $(document).ready(function () {
        document.getElementById("login_modal").classList.remove("disN");
        document.getElementById("login_modal").classList.toggle("disB");
        $("login_modal").fadeIn("slow");
  });
</script>

But no smooth appearance occurs.

Tell me, where did I do something wrong?

Author: Роман Тимохов, 2020-01-27
Source

2 answers

You can use adding a style via jquery But try not to mix js and jquery (At the end of the example as it should be on jquery)
For example:

    $(document).ready(function () {
        login.onclick = function (){
            document.getElementById("login_modal").classList.remove("disN");
            $('#login_modal').addClass('disB').fadeOut(0).fadeIn(3000);
        };
    });
    .disN {
        display: none !important;
    }
    .disB {
        display: block !important;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-view-bg">
    <div class="modal-view-container">
        <div id="login_modal" class="modal-view show-modal1 disN">
            <div class="modal-title">
                <div>LOGIN</div>
                <a href="/"><span class="modal-close"></span></a>
            </div>
            <form method="post" asp-page-handler="Login">
                <input type="email" name="Email" class="input-modal mrB20" placeholder="Email account">
                <input type="password" name="Password" class="input-modal mrB20" placeholder="Password">
                <a href="/Identity/Reset"><span class="btn-modal-text">Reset password</span></a>
                <button class="button-modal color-red">Login</button>
            </form>
        </div>
    </div>
    <button id="login">Появись!</button>
</div>

As an alternative to fadeIn You can use @keyframes in css.

    $(document).ready(function () {
        login.onclick = function (){
            document.getElementById("login_modal").classList.remove("disN");
            document.getElementById("login_modal").classList.add("disB");
        };
    });
    @keyframes showBlock {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .disN {
        display: none !important;
    }
    .disB {
        display: block !important;
        animation: showBlock 3s linear forwards;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-view-bg">
    <div class="modal-view-container">
        <div id="login_modal" class="modal-view show-modal1 disN">
            <div class="modal-title">
                <div>LOGIN</div>
                <a href="/"><span class="modal-close"></span></a>
            </div>
            <form method="post" asp-page-handler="Login">
                <input type="email" name="Email" class="input-modal mrB20" placeholder="Email account">
                <input type="password" name="Password" class="input-modal mrB20" placeholder="Password">
                <a href="/Identity/Reset"><span class="btn-modal-text">Reset password</span></a>
                <button class="button-modal color-red">Login</button>
            </form>
        </div>
    </div>
    <button id="login">Появись!</button>
</div>

On jquery:

    $(document).ready(function () {
        $('#login').click(function () {
            $('#login_modal').removeClass('disN');
            $('#login_modal').addClass('disB').fadeOut(0).fadeIn(3000);
        });
    });
    .disN {
        display: none !important;
    }
    .disB {
        display: block !important;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-view-bg">
    <div class="modal-view-container">
        <div id="login_modal" class="modal-view show-modal1 disN">
            <div class="modal-title">
                <div>LOGIN</div>
                <a href="/"><span class="modal-close"></span></a>
            </div>
            <form method="post" asp-page-handler="Login">
                <input type="email" name="Email" class="input-modal mrB20" placeholder="Email account">
                <input type="password" name="Password" class="input-modal mrB20" placeholder="Password">
                <a href="/Identity/Reset"><span class="btn-modal-text">Reset password</span></a>
                <button class="button-modal color-red">Login</button>
            </form>
        </div>
    </div>
    <button id="login">Появись!</button>
</div>
 2
Author: Denis640Kb, 2020-01-27 09:39:27

Thanks to everyone who responded, but I figured it out myself. I used the fadeIn {[3 function incorrectly]}

I wrote the script like this: 

$(document).ready(function () {
        document.getElementById("login_modal").classList.remove("disN");
        $("#login_modal").fadeIn(2500, function () {
            document.getElementById("login_modal").classList.toggle("disB")
        });
    });

Everything worked.

Your decisions also have a right to life, but they are too complex.

 0
Author: Роман Тимохов, 2020-01-27 10:13:41