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

Question

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

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

#collapseExample {background: red;}

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

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

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

从文档中：

用法 折叠插件利用几个类来处理繁重的工作：

.collapse隐藏内容

.collapse.show显示内容

.collapsing在过渡开始时添加，在过渡结束时删除

这些类可以在 _transitions.scss 中找到。

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

#collapseExample {transition: none; background: red;}

链接到文档