javascript 无法正确动画引导5通过js创建的折叠元素

rhfm7lfc 于 2023-01-19 发布在 Java

关注(0)|答案(2)|浏览(150)

我的目标是在服务器处理表单数据时创建一个collapse元素，以通知用户数据是成功发送到服务器还是发生了错误。

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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

我在测试html中添加了两个实现--第一个按钮调用我的实现，它在表单中，当它被按下时，数据应该被发送，但出现和隐藏的动画是肉干的，第二个按钮取自bootstrap文档，有正确的动画，这是我想在我使用js的实现中实现的。

JavaScript

来源：https://stackoverflow.com/questions/75151477/cant-properly-animate-bootstrap-5-collapse-element-created-via-js

2条答案

按热度按时间

h6my8fg21#

我认为问题在于js中创建的元素没有collapse类，只有当元素有collapse类时才会应用转换。我修改了代码，将collapse类添加到 Package 器中，并将警报类添加到 Package 器元素内的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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

赞(0）回复(0）举报 2023-01-19

i86rm4rw2#

所以，我想出了如何让动画变得正常，甚至不用检查这里的答案。我注意到html代码中的alert容器被 Package 在另一个容器中。但是当我通过js创建alert时，我没有 Package 它。在我 Package 了这个元素后，动画就像它应该的那样工作了。@Nick建议说，由于缺少collapse类，动画没有像预期的那样工作。但我测试了他的代码，没有它，动画仍然工作。动画工作正常的原因是，他 Package 我的代码在一个容器通过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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

不管怎样，我把"尼克的回答"标为"有帮助"。

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 无法正确动画引导5通过js创建的折叠元素

2条答案

相关问题

热门标签

最新问答