下拉菜单过渡 Bootstrap 5
[英]Dropdown menu transition Bootstrap 5
问题描述
我一直在尝试在 Bootstrap 5 中使用 hover 制作的下拉菜单中进行高度转换，转换不起作用，对此有什么帮助吗？
html：
<li class="nav-item dropdown position-static me-lg-3">
<a class="nav-link" role="button">Temas<button type="button" class="btn dropdown-toggle
dropdown-toggle-split p-0" data-bs-toggle="dropdown" aria-expanded="false">
</button></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
<a class="dropdown-item" href="../default/">Default</a>
<a class="dropdown-item" href="../united/">United</a>
<a class="dropdown-item" href="../yeti/">Yeti</a>
<a class="dropdown-item" href="../default/">Default</a>
<a class="dropdown-item" href="../united/">United</a>
<a class="dropdown-item" href="../yeti/">Yeti</a>
<a class="dropdown-item" href="../default/">Default</a>
<a class="dropdown-item" href="../united/">United</a>
<a class="dropdown-item" href="../yeti/">Yeti</a>
<a class="dropdown-item" href="../default/">Default</a>
<a class="dropdown-item" href="../united/">United</a>
<a class="dropdown-item" href="../yeti/">Yeti</a>
<a class="dropdown-item" href="../default/">Default</a>
<a class="dropdown-item" href="../united/">United</a>
<a class="dropdown-item" 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;
}
这是 Jquery function 使 hover 像点击 bootstrap5 下拉菜单一样工作
$('.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");
})
});
我已经尝试过这个问题的答案，但都没有用
1 个解决方案
解决方案1
1 已采纳 2022-04-15 03:50:45
@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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <link rel="stylesheet" href="app.css" /> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">Animated Dropdown</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" 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 class="dropdown-menu dropdown-menu-end animate slideIn" 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> </ul> </div> </div> </nav> <div class="container text-center"> <h1 class="mt-5 text-white fw-light"> Animated Bootstrap Navbar Dropdowns </h1> <p class="lead text-white-50"> An attractive yet subtle dropdown animation for dropdown menus loacated within a Bootstrap navbar </p> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>
Bootstrap 3下拉过渡
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.