我的下拉菜单有问题。
我想从右到左打开那个下拉菜单,然后用全高从左到右关闭它。
问题是,动画在打开时有效。但它在关闭时不起作用。抽屉菜单正在关闭任何效果或动画。
另一个奇怪的事情是,当我从浏览器检查代码时,如果我在“animation:transform-display .2s;”上切换勾选,打开和关闭动画工作正常。
1:
但是,如果我从 .cls parton 浏览器切换“显示”类,它会切换抽屉菜单,关闭动画不起作用。
我能得到帮助吗?
这是 HTML 部分。
<div class="nav-first-right ml-auto navbar-icon-top navbar-expand-lg ">
<ul class="navbar-nav align-items-center ml-auto nav-first-ul">
<li class="nav-item dropdown no-arrow no-caret dropdown-user user-menu-li">
<button class="btn btn-icon btn-transparent-dark dropdown-toggle" id="navbarDropdownUserImage"
href="javascript:void(0);" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><img class="img-fluid" src="{{ user().profilePhoto }}"></button>
<div class="dropdown-menu dropdown-menu-right border-0 shadow"
aria-labelledby="navbarDropdownUserImage">
这是 CSS 部分。
.nav-item .dropdown-menu {
box-shadow: 5px 0px 2px 5px rgb(0 0 0 / 75%) !important;
position: fixed;
top: 0;
/*left: 0;*/
right: 0;
min-height: 100%;
width: 120px;
margin: 0;
transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
}
.nav-item .dropdown-menu.show {
display: block;
animation: transform-display .2s;
animation-fill-mode:forwards;
animation-delay: 0ms;
animation-timing-function: linear;
}
.osahan-nav-top .nav-item .dropdown-menu:not(show) {
animation: transform-display--reversed .2s;
animation-fill-mode:forwards;
animation-delay: 0ms;
animation-timing-function: linear
}
@keyframes transform-display {
0% {
opacity: 0;
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
-webkit-transform: translateX(0);
}
}
@keyframes transform-display--reversed {
0% {
display: block;
opacity: 1;
transform: translateX(0);
-webkit-transform: translateX(0);
}
99% {
display: block;
opacity: 1;
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
display: none;
opacity: 0;
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
}
答案 0 :(得分:0)
即使没有关键帧,您也可以通过过渡来制作此动画。 只需假设过渡之前和之后的情景。
.dropdown-menu{
opacity: 0;
transform: translateX(100%);
visibility: hidden;
display: block;
transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
}
.dropdown-menu.show{
transform: translateX(0);
visibility: visible;
opacity:1;
}