javascript - Remove transition and delay of Bootstrap 4 Collapse element - Stack Overflow

admin管理员组

文章数量:1289857

I want to remove the transition and the delay of the Bootstrap 4 Collapse element. I'm using CSS to remove the transition itself:

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

#collapseExample {background: red;}

That part works fine. But there is still some delay before the Collapse element shows. Is there any way to remove that?

Here's the HTML:

Navbar

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

I want to remove the transition and the delay of the Bootstrap 4 Collapse element. I'm using CSS to remove the transition itself:

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

#collapseExample {background: red;}

That part works fine. But there is still some delay before the Collapse element shows. Is there any way to remove that?

Here's the HTML:

Navbar

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

• javascript
• html
• css
• bootstrap-4

Share Improve this question Follow edited Apr 18, 2018 at 14:05 Cray asked Apr 18, 2018 at 12:34 CrayCray 5,5031313 gold badges9191 silver badges195195 bronze badges 2

• 1 have you try .collapsing { transition: none !important; } – HTML CSS Hupp Technologies Commented Apr 18, 2018 at 12:44
• yes, doesn't work :-/ – Cray Commented Apr 18, 2018 at 12:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You're applying a transition on the 'collapsing' class, which is added after the transition begins, and removed when it's ending. Instead of placing the override on this class, place it on the actual element, or the main class which doesn't gets changed.

From the documentation:

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.

Simply add the following line to your CSS:

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

Link to docs

if you want to keep animation you can use and this is case when u have color on navbar

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

本文标签： javascriptRemove transition and delay of Bootstrap 4 Collapse elementStack Overflow