菜单下拉动画中的意外行为
Unexpected behavior in menu dropdown animation
我有一个带有淡入淡出底部动画的下拉菜单。一切正常,但有一个问题。
预期行为:当我单击按钮打开菜单时,下拉内容显示为淡入淡出的动画。有效!
问题:动画有一定的速度,点击打开菜单0.4s,点击关闭菜单0.4s。我希望这是速度,但是当我点击关闭时我被迫保持在 0.6 秒,因为低于该时间动画被破坏导致下拉菜单表现异常。也就是观想一下,然后就消失了。
所以回顾一下:一切都适用于 animation:animateToBottom 0.6s
但不适用于 animation:animateToBottom 0.4s
我将所有这些应用到 class .w3-dropdown-content.w3-hide
。您可以通过下面的 运行 代码亲眼看到,行为不应该如此。但是,如果您尝试将 0.4 秒更改为 0.6 秒或更多,则它可以正常工作。
抱歉,我是新手,我做错了什么吗?感谢您的回复,谢谢。
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
},500)
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.w3-container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.w3-dropdown-click {
position: absolute;
margin-top: 17px;
}
.w3-dropdown-content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position:relative;
animation:animateFromBottom 0.4s
}
@keyframes animateFromBottom {
from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}
}
@keyframes animateToBottom {
from{bottom:0;opacity:1} to{bottom:-50px;opacity:0}
}
.w3-show-block,.w3-show {
display:block!important;
}
.w3-dropdown-content.w3-hide {
animation:animateToBottom 0.4s
}
.user_menu_button {
width: 100%;
background: #fbfbfb!important;
font-weight: 500!important;
}
<button onclick="myFunction()" class="user_menu_button">Account</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu header">
<span class="display name">Hello user</span>
<span class="display mail">usermail@gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user">1</i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping">2</i>
<span class="link_text">My orders</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear">4</i>
<span class="link_text">Settings</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
}, 400) // this duration must be like css duration
}
}
var x = document.getElementById("Demo");
function myFunction() {
x.classList.toggle('w3-show')
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.w3-container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.w3-dropdown-click {
position: absolute;
margin-top: 17px;
}
.w3-dropdown-content {
visibility: hidden;
z-index: -10;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position:relative;
top: 30px;
transition: top .4s, z-index .4s, visibility .4s, opacity .4s;
opacity: 0;
}
.w3-show {
visibility: visible;
opacity: 1;
z-index: 1;
top: 0;
}
.user_menu_button {
width: 100%;
background: #fbfbfb!important;
font-weight: 500!important;
}
<button onclick="myFunction()" class="user_menu_button">Account</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu header">
<span class="display name">Hello user</span>
<span class="display mail">usermail@gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user">1</i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping">2</i>
<span class="link_text">My orders</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear">4</i>
<span class="link_text">Settings</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
我有一个带有淡入淡出底部动画的下拉菜单。一切正常,但有一个问题。
预期行为:当我单击按钮打开菜单时,下拉内容显示为淡入淡出的动画。有效!
问题:动画有一定的速度,点击打开菜单0.4s,点击关闭菜单0.4s。我希望这是速度,但是当我点击关闭时我被迫保持在 0.6 秒,因为低于该时间动画被破坏导致下拉菜单表现异常。也就是观想一下,然后就消失了。
所以回顾一下:一切都适用于 animation:animateToBottom 0.6s
但不适用于 animation:animateToBottom 0.4s
我将所有这些应用到 class .w3-dropdown-content.w3-hide
。您可以通过下面的 运行 代码亲眼看到,行为不应该如此。但是,如果您尝试将 0.4 秒更改为 0.6 秒或更多,则它可以正常工作。
抱歉,我是新手,我做错了什么吗?感谢您的回复,谢谢。
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
},500)
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.w3-container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.w3-dropdown-click {
position: absolute;
margin-top: 17px;
}
.w3-dropdown-content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position:relative;
animation:animateFromBottom 0.4s
}
@keyframes animateFromBottom {
from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}
}
@keyframes animateToBottom {
from{bottom:0;opacity:1} to{bottom:-50px;opacity:0}
}
.w3-show-block,.w3-show {
display:block!important;
}
.w3-dropdown-content.w3-hide {
animation:animateToBottom 0.4s
}
.user_menu_button {
width: 100%;
background: #fbfbfb!important;
font-weight: 500!important;
}
<button onclick="myFunction()" class="user_menu_button">Account</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu header">
<span class="display name">Hello user</span>
<span class="display mail">usermail@gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user">1</i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping">2</i>
<span class="link_text">My orders</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear">4</i>
<span class="link_text">Settings</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
}, 400) // this duration must be like css duration
}
}
var x = document.getElementById("Demo");
function myFunction() {
x.classList.toggle('w3-show')
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.w3-container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.w3-dropdown-click {
position: absolute;
margin-top: 17px;
}
.w3-dropdown-content {
visibility: hidden;
z-index: -10;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position:relative;
top: 30px;
transition: top .4s, z-index .4s, visibility .4s, opacity .4s;
opacity: 0;
}
.w3-show {
visibility: visible;
opacity: 1;
z-index: 1;
top: 0;
}
.user_menu_button {
width: 100%;
background: #fbfbfb!important;
font-weight: 500!important;
}
<button onclick="myFunction()" class="user_menu_button">Account</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu header">
<span class="display name">Hello user</span>
<span class="display mail">usermail@gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user">1</i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping">2</i>
<span class="link_text">My orders</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear">4</i>
<span class="link_text">Settings</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>