CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapbootstrap-4
JMKelley
JMKelley

Reputation: 658

Animate Bootstrap 4 Dropdown

I'm looking to animate a bootstrap 4 dropdown but I'm struggling a little. I've got the current code running it:

.navbar-nav .dropdown-menu
{
  border:0px;
  transform: translate3d(0px, -100%, 0px);
  transition: opacity 300ms ease 0s, transform 300ms ease 0s;
  margin: 5px 0px;
}

.navbar-nav .dropdown-menu.show
{
  transform: translate3d(0px, 0px, 0px) !important;
  opacity:1 !important;
}

and the JS:

$('#navDrop').on('show.bs.dropdown', function () {
  $(".overlay").fadeIn(150);
})
$('#navDrop').on('hide.bs.dropdown', function () {
  $(".overlay").fadeOut(150);
})

But the CSS seems to not be triggering at all? Has anyone come across a fix to this problem?

Upvotes: 0

Views: 1954

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

You can do this easier with CSS... note that bootstrap is inserting a lot of inline CSS on the dropdown which is getting precedence over your jQuery fadeIn()

.dropdown .dropdown-menu{animation-name: example; animation-duration: 4s;}
@keyframes example {
    from {opacity:.2}
    to {opacity:1;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Dropdown with just CSS </h2>
  <p>change the duration as you want </p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

Upvotes: 6

Related Questions