Dropdown menu transition Bootstrap 5-CodePudding

I've been trying to make a height transition in my dropdown menu made in Bootstrap 5 with hover, the transition is not working, any help on this?

html:

<li >
        <a  role="button">Temas<button type="button"  data-bs-toggle="dropdown" aria-expanded="false">
        </button></a>
        
        <div >
          <a  href="#">Action</a>
          <a  href="#">Another action</a>
          <a  href="#">Something else here</a>
          <a  href="#">Separated link</a>
          <a  href="../default/">Default</a>
          <a  href="../united/">United</a>
          <a  href="../yeti/">Yeti</a>
          <a  href="../default/">Default</a>
          <a  href="../united/">United</a>
          <a  href="../yeti/">Yeti</a>
          <a  href="../default/">Default</a>
          <a  href="../united/">United</a>
          <a  href="../yeti/">Yeti</a>
          <a  href="../default/">Default</a>
          <a  href="../united/">United</a>
          <a  href="../yeti/">Yeti</a>
          <a  href="../default/">Default</a>
          <a  href="../united/">United</a>
          <a  href="../yeti/">Yeti</a>
        </div>
</li>

CSS

.dropdown .dropdown-menu {
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
 }
    
 .dropdown-menu.show {
      margin-top: 0vh;
      width: 40%;
      margin-left: 38vw;
 }
    
 .dropdown:hover .dropdown-menu {
      display: flex;
      flex-wrap: wrap;
      transform: scaleY(1)
 }
    
 .dropdown-item {
      width: 25% !important;
 }

And this is the Jquery function to make the hover work as a click on the bootstrap5 dropdown

$('.dropdown').on("mouseenter", () => {
    $('.dropdown > a > button').addClass('show')
    $('.dropdown > a > button').attr("aria-expanded","true");
    $('.dropdown > div').addClass('show')
    $('.dropdown > div').attr("data-bs-popper","none");
  })
  
  $('.dropdown').on("mouseleave", () => {
    $('.dropdown > a > button').removeClass('show')
    $('.dropdown > a > button').attr("aria-expanded","false");
    $('.dropdown > div').removeClass('show')
    $('.dropdown > div').removeAttr("data-bs-popper","none");
  })
});

I have already tried the answers to this question but none of them are working

CodePudding user response：

@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}


/* Other styles for the page not related to the animated dropdown */

body {
  background: #007bff;
  background: linear-gradient(to right, #0062e6, #33aeff);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <link rel="stylesheet" href="app.css" />
</head>

<body>
  <nav >
    <div >
      <a  href="#">Animated Dropdown</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>

      <div  id="navbarSupportedContent">
        <ul >
          <li >
            <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Click Me!
              </a>
            <!-- Here's the magic. Add the .animate and .slideIn classes to your .dropdown-menu and you're all set! -->
            <div  aria-labelledby="navbarDropdown">
              <a  href="#">Action</a>
              <a  href="#">Another action</a>
              <div ></div>
              <a  href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div >
    <h1 >
      Animated Bootstrap Navbar Dropdowns
    </h1>
    <p >
      An attractive yet subtle dropdown animation for dropdown menus loacated within a Bootstrap navbar
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>