Плавное появление блока

13 марта 2022, 19:50

У меня есть такой участок разметки (сразу оговорюсь, что разметку делал не я, ее мне в качестве темплейта предоставили, и плясать нужно от нее):

<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>

Контейнер с айдишником id="login_modal" отвечает за некую форму. Появление этой формы происходит путем переключения класса disN в disB

.disN {
    display: none !important;
}
.disB {
    display: block !important;
}

Механика такова, что при загрузке страницы, disN должен сменится в disBи форма анимированно появляется.

я это реализовал с помощью JQuery так:

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

но никакого плавного появления не происходит.

Подскажите, где я что не так сделал?

Answer 1

Вы можете использовать добавление стиля через jquery Но старайтесь не смешивать js и jquery (В конце пример как надо на jquery)
Например:

    $(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>

Как альтернатива fadeIn Вы можете использовать @keyframes в 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>

На 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>

Answer 2

Спасибо всем кто откликнулся, но я разобрался сам. Я неправильно использовал функцию fadeIn

Перписал скрипт так:

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

все заработало.

Ваши решения тоже имеют право на жизнь, но они слишком сложные.