I have successfully implemented the show animation for the Bootstrap dropdown menu, but now I'm struggling to find a way

I have successfully implemented a CSS animation dropdown menu as shown below:

/* Custom CSS for animation */

.dropdown .dropdown-menu {
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  from {
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container pt-5">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-12">

      <div class="dropdown mb-5">
        <button type="button" class="btn btn-primary dropdown-toggle" data-display="static" 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 class="btn-group dropleft dropdown mb-5">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>

      <div class="btn-group dropright dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    DropRight
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>


    </div>
  </div>
</div>

The dropdown menu entrance animation is currently working smoothly. However, I am looking for suggestions on how to implement an exit animation when the dropdown menu is hidden. Ideally, I want the exit animation to be a reverse of the entrance animation. Any ideas would be greatly appreciated.

cssbootstrap-4css-animations

Answer №1

It is recommended to eliminate the CSS animations and change the .dropdown-menu to display: block !important. Initially, set transform: scale(0); for .dropdown-menu and add a transition to it. When the button is clicked, the class .show is added to the .dropdown-menu. Once the show class is active, adjust the CSS to transform: scale(1);. For a clearer understanding, refer to the snippet below.

.dropdown .dropdown-menu {
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
  display: block !important;
  transform: scale(0);
}
.dropdown .dropdown-menu.show{
  transform: scale(1);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container pt-5">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-12">

      <div class="dropdown mb-5">
        <button type="button" class="btn btn-primary dropdown-toggle" data-display="static" 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 class="btn-group dropleft dropdown mb-5">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>

      <div class="btn-group dropright dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    DropRight
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>


    </div>
  </div>
</div>

Answer №2

When we apply the CSS properties display:block or display:none, it can interfere with our animations.

To ensure that animations work correctly, try using transform: scale(0); instead of display:none. You can refer to my styling for more details.

If you have any questions about this, feel free to ask.

Hope this explanation helps!

.dropdown .dropdown-menu {
  animation-name: example;
  animation-duration: 1s;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
  opacity: 1;
  transform: scale(1);
}

.dropdown .dropdown-menu{  
  transform: scale(0);     
  opacity: 0; display:
  block !important;
 }
.dropdown-menu.show {
  display: block;
  transform: scale(1);
  opacity: 1;
}

@keyframes example {
  from {
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
  }
  to {
        -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    opacity: 1;
    transform: scale(1);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container pt-5">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-12">

      <div class="dropdown mb-5">
        <button type="button" class="btn btn-primary dropdown-toggle" data-display="static" 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 class="btn-group dropleft dropdown mb-5">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>

      <div class="btn-group dropright dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    DropRight
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>


    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The grid flex end is behaving differently than I anticipated

I am struggling to align two buttons vertically on the right side. Here is my code snippet: const WalletsContainer = () => { return ( <Grid style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'} ...

javascriptcssreactjsmaterial-ui

Angular 9 does not update Bootstrap 4 colors

I created a custom scss file called modified-bootstrap.scss to customize bootstrap variables $theme-colors: ( "primary": #84329b, "secondary": #02bceb ); @import "node_modules/bootstrap/scss/bootstrap.scss"; // also tried using a relative path Next, ...

angulartwitter-bootstrapsassbootstrap-4angular9

Partial element visibility while scrolling

My goal is to create a table with a fixed size that can be horizontally scrolled. I applied overflow-x: auto;, but only a part of the table is scrolling while the start of the table is off the screen. I am unable to provide the code, so I've added a s ...

htmlcss

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

javascriptcssbootstrap-5

What could be the reason for my Bootstrap collapse navigation bar not functioning properly?

<!DOCTYPE html> <html lang="en"> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> ...

htmlcsstwitter-bootstrap

Modify the styling of the Checkbox within the script template

I am currently working with a list that contains checkboxes, but they are displaying with the default CSS style. How can I change the CSS style of the checkboxes? Below is the code I am using, and I need to modify the CSS of the checkboxes. <div id ...

javascripthtmlcsscheckbox

How can I keep a div open when the mouse hovers over it, and then close it when the mouse

My current markup looks like this: <div class="wrapper-header"> <div class="container"> <div class="navbar"> <ul class="nav navbar-nav"> <li class=""><a href="#" class="toggle">Show Categories</a></li> </ ...

javascriptjquerycss

Tips on attaching a class to elements in a loop when a click event occurs

In my HTML, I am displaying information boxes from an array of objects that are selectable. To achieve this, I bind a class on the click event. However, since I am retrieving the elements through a v-for loop, when I select one box, the class gets bound to ...

javascriptcssclassvue.js

Refreshing pre-established CSS styles

I am currently working on developing an alternative design for a website as a backup plan. Unfortunately, I am restricted in terms of changing the architecture of the system. The main stylesheet is loaded first, followed by a second one which I have contro ...

css

Add distinctive formatting for the final element that is not the last child

Presented with a fascinating challenge, I find myself with an ever-changing number of .child.red children. I am in need of referencing the last .child.red element dynamically using styles. Although I have attempted to achieve this on my own, I am curious a ...

javascripthtmlcss

Adjust Sidebar Height to Match Document Height (using React Pro Sidebar)

Having an issue with the height of a sidebar component in Next.js using React Pro Sidebar. It seems to be a JavaScript, HTML, and CSS related problem. I've tried several suggested solutions from Stack Overflow, but none of them seem to work. Surprisin ...

javascripthtmlcssreactjsnext.js

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

javascripthtmlcss

Difficulty in accurately identifying the current page on the appbar

I'm attempting to make the active page in my navbar stand out by giving it a white background color and skyblue text. However, for some reason, I can't get the text color to display as skyblue in the appbar. You can see how it currently looks in ...

cssreactjsreact-routermaterial-ui

The function getComputedStyle('background-color') will return a transparent value that does not inherit from any ancestor element

When using getComputedStyle, it is expected to return the final computed CSS property value. However, for background-color, browsers tend to return "transparent" (or rgba(x,x,x,0)) instead of computing the inherited value from ancestors. The method only s ...

javascriptcssbackground-colorgetcomputedstyle

Adjustable icon dimensions in Material-UI

My current setup involves utilizing material-UI icons <ArrowRightAlt/> I have been able to manipulate the size of the icon using the fontSize attribute <ArrowRightAlt fontSize="large" /> However, I am interested in having the size ...

cssreactjsmaterial-ui

vertical lines alongside the y-axis in a d3 bar graph

https://jsfiddle.net/betasquirrel/pnyn7vzj/1/ showcases the method for adding horizontal lines along the y axis in this plunkr. I attempted to implement the following CSS code: .axis path, .axis line { fill: none; stroke: #000; } I am lo ...

javascriptcssd3.js

Best Practices for Prioritizing CSS Selection

My usual practice is to organize the rules in my CSS file to align with their corresponding elements in the HTML code. However, when it comes to global rules such as styling for input,textarea,p,tr,th, and so on, I wonder if there is a specific convention ...

cssconventions

Switch navigation - always display the menu on the existing page

I have a toggle menu implemented. Please check out the code and functionality on JsFiddle When clicking on a h3 tag like Category 1 (which is an a tag), the menu opens and remains open on the current page. However, if you click on the h3 tag (Category1) ...

javascriptjqueryhtmlcss

What is the best way to arrange three identical boxes next to each other, all of the same size

Imagine having a container with the following dimensions: .container { width: 960px; margin: 0 auto; height: 500px; } Now, envision wanting to add three boxes in the center aligned horizontally with these specifications: .box1 { background-color ...

htmlcssalignment

Prevent horizontal HTML scrolling while displaying a layer

I am currently working with a .layer div element that darkens the page to highlight a modal. However, I have encountered an issue where upon triggering the event, the div does not occupy 100% of the screen and the original browser scroll bar disappears. I ...

javascriptcss