CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
Cray
Cray

Reputation: 5483

Remove transition and delay of Bootstrap 4 Collapse element

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>

Upvotes: 6

Views: 7936

Answers (2)

sean comor
sean comor

Reputation: 59

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

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

Upvotes: 2

roberrrt-s
roberrrt-s

Reputation: 8210

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

Upvotes: 6

Related Questions