CSS ::選擇器動畫後更慢

Question

所以我有一個下拉菜單，一旦點擊鏈接就會淡入。一旦鏈接被點擊，一切都很好，菜單淡入，但是一旦我點擊並且一個功能運行，淡出下拉菜單。盒子頂部的三角形比實際盒子稍微慢一些。在CSS我有此三角形的:after選擇和小提琴可以發現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(); 
     }); 
    }); 

Answer 1

您已經創建了不同的class上的箭頭和切換其他class上的不透明度。你的箭頭不應該在.Account-Links。如果你不想延遲發生，應該在.Account-Links-On。

SEE THE DEMO

.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; 
} 

而這個結論是：僞選擇後不動畫慢。