所以我有一个下拉菜单,单击链接后会淡入。单击链接后,一切都很好,菜单会淡入,但一旦我单击关闭,就会运行一个函数,使下拉菜单淡出。盒子顶部的三 Angular 形淡出比实际盒子稍慢。在 css 中,我用 :after
选择器制作了这个三 Angular 形,并且可以找到一个 fiddle JsFiddle
HTML
<a href="#" class="Header-Link Right Account-Actions"><?php echo 'Welcome ' . $user->data()->fname . '!'; ?></a>
<div class="Account-Links">
<a href="#" class="Account-Link">My Account</a>
<a href="logout.php" class="Account-Link">Sign Out</a>
<a href="#" class="Account-Link">Help</a>
</div>
CSS
.Account-Actions {
postition: relative;
}
.Account-Links {
position: absolute;
top: 45px;
left: 0;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
width: 200px;
height: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
z-index: 1000;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.Account-Links-On {
height: auto;
visibility: visible;
opacity: 1;
}
.Account-Links::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.Account-Link {
display: block;
color: #FFF;
margin: 0;
padding: 10px;
}
.Account-Link:hover {
background-color: rgba(231,76,60,.75);
}
a {
text-decoration: none;
}
a.Header-Link {
position: relative;
display: block;
margin: 0 10px;
padding: 0 8px;
line-height: 47px;
color: #777;
border-bottom: 3px solid transparent;
}
a.Header-Link:hover {
color: #000;
}
JS
$(document).ready(function(){
$('.Account-Actions').bind('click', function(){
$('.Account-Links').toggleClass('Account-Links-On');
});
$('html').click(function() {
$('.Account-Links').removeClass('Account-Links-On');
});
$('.Account-Links, .Account-Actions').click(function(event){
event.stopPropagation();
});
});
最佳答案
您已经在不同的 class
上创建了该箭头,并在其他 class
上切换了不透明度。你的箭头不应该在 .Account-Links
上。如果您不希望发生这种延迟,它应该在 .Account-Links-On
上。
.Account-Links-On::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
得出的结论是:在伪选择器之后动画不会变慢。
关于javascript - CSS::after 选择器动画速度变慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22106211/