Не удается правильно анимировать элемент сворачивания bootstrap 5, созданный с помощью js

Моя цель - создать элемент сворачивания, когда данные формы были обработаны сервером, чтобы уведомить пользователя о том, были ли данные успешно отправлены на сервер или произошла ошибка.

function sendForm(event, form) {
    const wrapper=document.createElement('div');
    wrapper.setAttribute('role', 'alert');
    wrapper.classList.add('alert', 'alert-dismissible', 'alert-success');
    wrapper.innerHTML='<span>Success!</span><button type = "button" class = "btn-close" data-bs-dismiss = "alert"></button>';
    form.prepend(wrapper);

    const bsWrapperCollapse = bootstrap.Collapse.getOrCreateInstance(wrapper);
    bsWrapperCollapse.show();
    setTimeout(() => {
        bsWrapperCollapse.hide();
    }, 4000);
    setTimeout(() => {
        wrapper.remove();
    }, 7000);
    form.reset();

    event.preventDefault();
}

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
</head>
<body>
    <main class = "container-fluid my-5" style = "max-width:300px">
        <form action = "#" method = "post" onsubmit = "sendForm(event, this)"> 
            <button type = "submit" class = "btn btn-primary">My form submit btn</button>
        </form>

        <button class = "btn btn-primary" data-bs-toggle = "collapse" data-bs-target = "#collapseExample" aria-expanded = "false" aria-controls = "collapseExample">
            Button with data-bs-target
        </button>

        <div class = "collapse" id = "collapseExample">
            <div class = "alert alert-dismissible alert-success" role = "alert">
                <span>Success!</span>
                <button type = "button" class = "btn-close" data-bs-dismiss = "alert"></button>
            </div>
        </div>
    </main>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
</body>
</html>

Добавил в тестовый html две реализации - первая кнопка вызывает мою реализацию, которая есть в форме и при ее нажатии должны отправляться данные, но анимация появления и скрытия дергается. Вторая кнопка взята из документации бутстрапа, с правильной анимацией, чего я и хочу добиться в своей реализации с помощью js.

javascript bootstrap-5

17.01.2023 20:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, проблема в том, что элемент, созданный в js, не имеет класса collapse, переход применяется только в том случае, если элемент имеет класс collapse. Я изменил код, добавил класс collapse в оболочку и добавил классы предупреждений в div внутри элемента оболочки. Теперь кажется, что анимация работает правильно.

function sendForm(event, form) {
    const wrapper=document.createElement('div');
    wrapper.setAttribute('role', 'alert');
wrapper.classList.add("collapse");
    wrapper.innerHTML='<div class = "alert alert-dismissible alert-success"><span>Success!</span><button type = "button" class = "btn-close" data-bs-dismiss = "alert"></button> </div>';
    form.prepend(wrapper);

    const bsWrapperCollapse = bootstrap.Collapse.getOrCreateInstance(wrapper);
    bsWrapperCollapse.show();
    setTimeout(() => {
        bsWrapperCollapse.hide();
    }, 4000);
    setTimeout(() => {
        wrapper.remove();
    }, 7000);
    form.reset();

    event.preventDefault();
}

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
</head>
<body>
    <main class = "container-fluid my-5" style = "max-width:300px">
        <form action = "#" method = "post" onsubmit = "sendForm(event, this)"> 
            <button type = "submit" class = "btn btn-primary">My form submit btn</button>
        </form>

        <button class = "btn btn-primary" data-bs-toggle = "collapse" data-bs-target = "#collapseExample" aria-expanded = "false" aria-controls = "collapseExample">
            Button with data-bs-target
        </button>

        <div class = "collapse" id = "collapseExample">
            <div class = "alert alert-dismissible alert-success" role = "alert">
                <span>Success!</span>
                <button type = "button" class = "btn-close" data-bs-dismiss = "alert"></button>
            </div>
        </div>
    </main>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
</body>
</html>

18.01.2023 12:35

Ответ принят как подходящий

Итак, я понял, как сделать анимацию нормальной, даже не проверяя ответы здесь. Я заметил, что контейнер предупреждений в html-коде завернут в другой контейнер. Но когда я создал оповещение через js, я его не обернул. После того, как я завернул этот элемент, анимация заработала как надо. @Nick предположил, что анимация не работает должным образом из-за отсутствия класса collapse, но я протестировал его код без него, и анимация все еще работает. Причина, по которой анимация работает правильно, заключается в том, что он завернул мой код в контейнер через innerHTML, по сути, делая то же самое, что и я. Вот что у меня получилось.

function sendForm(event, form) {
    const alert=document.createElement('div');
    alert.setAttribute('role', 'alert');
    alert.classList.add('alert', 'alert-dismissible', 'alert-success');
    alert.innerHTML='<span>Success!</span><button type = "button" class = "btn-close" data-bs-dismiss = "alert"></button>';

    const alertWrapper=document.createElement('div');
    alertWrapper.append(alert);
    form.prepend(alertWrapper);

    const alertWrapperCollapse = bootstrap.Collapse.getOrCreateInstance(alertWrapper);
    alertWrapperCollapse.show();
    setTimeout(() => {
        alertWrapperCollapse.hide();
    }, 4000);
    setTimeout(() => {
        alertWrapper.remove();
    }, 7000);
    form.reset();
    event.preventDefault();
}

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
</head>
<body>
    <main class = "container-fluid my-5" style = "max-width:300px">
        <form action = "#" method = "post" onsubmit = "sendForm(event, this)"> 
            <button type = "submit" class = "btn btn-primary">My form submit btn</button>
        </form>

        <button class = "btn btn-primary" data-bs-toggle = "collapse" data-bs-target = "#collapseExample" aria-expanded = "false" aria-controls = "collapseExample">
            Button with data-bs-target
        </button>

        <div class = "collapse" id = "collapseExample">
            <div class = "alert alert-dismissible alert-success" role = "alert">
                <span>Success!</span>
                <button type = "button" class = "btn-close" data-bs-dismiss = "alert"></button>
            </div>
        </div>
    </main>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
</body>
</html>

В любом случае, я отметил ответ @Nick как полезный.

18.01.2023 19:35

Другие вопросы по теме

Bootstrap 5 больших устройств получает нижнее пустое пространство

Bootstrap: заполните оставшееся вертикальное пространство адаптивной строкой из 24 столбцов

Создание мегаменю с помощью react-bootstrap

Как я могу свернуть языковой переключатель без JS?

Выпадающий список не работает с одним параметром в Svelte

Как использовать bootstrap (v5) обычно в Angular (v15)

Вертикальное выравнивание на боковой панели

Как добавить липкий нижний колонтитул в шаблон администратора 5.3.0

Как я могу быстро центрировать содержимое div с боковой панелью и верхним меню на одной странице?

Почему createPopper не является функцией, хотя я включаю Поппер?

Не удается правильно анимировать элемент сворачивания bootstrap 5, созданный с помощью js

Ответы 2

Другие вопросы по теме

Похожие вопросы