javascript - 删除 Bootstrap 4 Collapse 元素的过渡和延迟

Question

我想删除 Bootstrap 4 Collapse 元素的过渡和延迟。 我正在使用 CSS 来删除过渡本身:

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

#collapseExample {background: red;}

那部分工作正常。但在 Collapse 元素显示之前仍有一些延迟。有什么办法可以去除吗？

这是 HTML:

导航栏

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<form class="form-inline my-2 my-lg-0">
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</form>
</div>
</nav>


<div class="collapse" id="collapseExample">
<div class="container">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>

Answer 1

您正在对“折叠”类应用过渡，该过渡在过渡开始后添加，并在过渡结束时移除。不要将重写放在此类上，而是将其放在实际元素或未更改的主类上。

来自文档:

Usage The collapse plugin utilizes a few classes to handle the heavy lifting:

.collapse hides the content

.collapse.show shows the content

.collapsing is added when the transition starts, and removed when it finishes

These classes can be found in _transitions.scss.

只需将以下行添加到您的 CSS 中:

#collapseExample {转换:无；背景:红色；

Link to docs