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

您正在对“折叠”类应用转换，该转换在转换开始后添加，并在结束时删除。不要将覆盖放在这个类上，而是将它放在实际的元素上，或者不会被改变的主类。

来自文档：

用法   崩溃插件使用几个类来处理繁重的工作：

.collapse隐藏了内容

.collapse.show显示内容
     转换开始时添加
.collapsing，完成转换后删除<{p>}
这些类可以在_transitions.scss中找到。

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

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

Link to docs

Answer 2

如果您想保留动画，则可以使用，这是当您在导航栏上显示颜色时出现的情况

.navbar {
   transition: ease-in .3s;
}

删除Bootstrap 4 Collapse元素的转换和延迟

2 个答案: