顛倒CSS過渡順序

Question

我有一個菜單按鈕和一個隱藏列表。我正在切換課程以創建下拉效果。

添加類時，它會打開下拉菜單。

但是，在刪除類後，您將在下面的代碼片段中看到，轉換並非如此無縫。基本上我想要做的是顛倒過渡發生的順序，但我不知道如何做到這一點。

感謝您的幫助。

$('.contact-menu-button').children('svg').click(function (event) { 
 
\t event.stopPropagation(); 
 
    $('.contact-menu-items').toggleClass('show'); 
 
    $('.contact-menu-button').children('svg').toggleClass('rotate'); 
 
});

@import url(https://fonts.googleapis.com/css?family=Kanit:200,400); 
 

 
* { 
 
    font-family: Kanit, sans-serif; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 

 
.container { 
 
    width: 90%; 
 
    color: #fff; 
 
    background-color: #4a7ff7; 
 
    border-radius: 8px 8px 0 0; 
 
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4); 
 
} 
 

 
.active-contact { 
 
    padding-right: 0; 
 
} 
 

 
.contact-menu { 
 
    position: relative; 
 
    padding-left: 0; 
 
} 
 

 
.contact-menu-button { 
 
    background-color: transparent; 
 
    border: none; 
 
    border-radius: 4px; 
 
    outline: none; 
 
    color: #fff; 
 
    padding: 0; 
 
    width: 25px; 
 
    cursor: pointer; 
 
    transform: translateY(3px); 
 
} 
 

 
.contact-menu-button > svg { 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 15px; 
 
    stroke: #fff; 
 
    transition: transform 250ms linear, border-radius 250ms ease-in 275ms; 
 
} 
 

 
.contact-menu-button > svg:hover { 
 
    background-color: #fff; 
 
    stroke: #4a7ff7; 
 
} 
 

 
.contact-menu-button > svg:active { 
 
    stroke: #fff; 
 
    background-color: #000; 
 
} 
 

 
.contact-menu-button > .rotate { 
 
    background-color: #000; 
 
    border-radius: 0 0 15px 15px; 
 
    transform: rotate(180deg); 
 
} 
 

 
.contact-menu-button > .rotate:hover { 
 
    background-color: #000; 
 
    stroke: #fff; 
 
} 
 

 
.contact-menu-items { 
 
    visibility: hidden; 
 
    height: 0; 
 
    overflow: hidden; 
 
    color: #fff; 
 
    position: absolute; 
 
    list-style-type: none; 
 
    padding: 10px 0; 
 
    margin: 0 5px 5px 5px; 
 
    border-radius: 6px 0 6px 6px; 
 
    background-color: #000; 
 
    transform: translate(-57px, -6px); 
 
    transition: visibility 250ms ease-out 550ms, height 250ms ease-out 550ms; 
 
} 
 

 
.contact-menu-items > li { 
 
    padding: 1px 15px 1px 15px; 
 
} 
 

 
.contact-menu-items.show { 
 
    visibility: visible; 
 
    height: 50px; 
 
} 
 

 
.contact-menu-items > li:hover { 
 
    background-color: #fff; 
 
    color: #000; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="container"> 
 
    <div class="active-contact"> 
 
    John Smith 
 
    </div> 
 
    <div class="contact-menu"> 
 
    <button class="contact-menu-button"> 
 
     <svg> 
 
     <path d="M4 9 l 6 5 l 6 -5" stroke-width="1.5" fill="none" /> 
 
     </svg> 
 
    </button> 
 
    <ul class="contact-menu-items"> 
 
     <li> 
 
     <a>Edit</a> 
 
     </li> 
 
     <li> 
 
     <a>Delete</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

您可以設置過渡時間都在基地和轉化狀態：

$('.contact-menu-button').children('svg').click(function (event) { 
 
\t event.stopPropagation(); 
 
    $('.contact-menu-items').toggleClass('show'); 
 
    $('.contact-menu-button').children('svg').toggleClass('rotate'); 
 
});

@import url(https://fonts.googleapis.com/css?family=Kanit:200,400); 
 

 
* { 
 
    font-family: Kanit, sans-serif; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 

 
.container { 
 
    width: 90%; 
 
    color: #fff; 
 
    background-color: #4a7ff7; 
 
    border-radius: 8px 8px 0 0; 
 
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4); 
 
} 
 

 
.active-contact { 
 
    padding-right: 0; 
 
} 
 

 
.contact-menu { 
 
    position: relative; 
 
    padding-left: 0; 
 
} 
 

 
.contact-menu-button { 
 
    background-color: transparent; 
 
    border: none; 
 
    border-radius: 4px; 
 
    outline: none; 
 
    color: #fff; 
 
    padding: 0; 
 
    width: 25px; 
 
    cursor: pointer; 
 
    transform: translateY(3px); 
 
} 
 

 
.contact-menu-button > svg { 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 15px; 
 
    stroke: #fff; 
 
    transition: transform 250ms linear 275ms, border-radius 250ms ease-in 0ms; 
 
} 
 

 
.contact-menu-button > svg:hover { 
 
    background-color: #fff; 
 
    stroke: #4a7ff7; 
 
} 
 

 
.contact-menu-button > svg:active { 
 
    stroke: #fff; 
 
    background-color: #000; 
 
} 
 

 
.contact-menu-button > .rotate { 
 
    background-color: #000; 
 
    border-radius: 0 0 15px 15px; 
 
    transform: rotate(180deg); 
 
    transition: transform 250ms linear, border-radius 250ms ease-in 275ms; 
 
} 
 

 
.contact-menu-button > .rotate:hover { 
 
    background-color: #000; 
 
    stroke: #fff; 
 
} 
 

 
.contact-menu-items { 
 
    visibility: hidden; 
 
    height: 0; 
 
    overflow: hidden; 
 
    color: #fff; 
 
    position: absolute; 
 
    list-style-type: none; 
 
    padding: 10px 0; 
 
    margin: 0 5px 5px 5px; 
 
    border-radius: 6px 0 6px 6px; 
 
    background-color: #000; 
 
    transform: translate(-57px, -6px); 
 
    transition: visibility 250ms ease-out, height 250ms ease-out; 
 
} 
 

 
.contact-menu-items > li { 
 
    padding: 1px 15px 1px 15px; 
 
} 
 

 
.contact-menu-items.show { 
 
    visibility: visible; 
 
    height: 50px; 
 
    transition: visibility 250ms ease-out 550ms, height 250ms ease-out 550ms; 
 
} 
 

 
.contact-menu-items > li:hover { 
 
    background-color: #fff; 
 
    color: #000; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="container"> 
 
    <div class="active-contact"> 
 
    John Smith 
 
    </div> 
 
    <div class="contact-menu"> 
 
    <button class="contact-menu-button"> 
 
     <svg> 
 
     <path d="M4 9 l 6 5 l 6 -5" stroke-width="1.5" fill="none" /> 
 
     </svg> 
 
    </button> 
 
    <ul class="contact-menu-items"> 
 
     <li> 
 
     <a>Edit</a> 
 
     </li> 
 
     <li> 
 
     <a>Delete</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

你需要從按鈕，而不是內部的SVG趕上事件;）

$('.contact-menu-button').click(function (event) { 
 
\t event.stopPropagation(); 
 
    $('.contact-menu-items').toggleClass('show'); 
 
    $('.contact-menu-button').children('svg').toggleClass('rotate'); 
 
});

@import url(https://fonts.googleapis.com/css?family=Kanit:200,400); 
 

 
* { 
 
    font-family: Kanit, sans-serif; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 

 
.container { 
 
    width: 90%; 
 
    color: #fff; 
 
    background-color: #4a7ff7; 
 
    border-radius: 8px 8px 0 0; 
 
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4); 
 
} 
 

 
.active-contact { 
 
    padding-right: 0; 
 
} 
 

 
.contact-menu { 
 
    position: relative; 
 
    padding-left: 0; 
 
} 
 

 
.contact-menu-button { 
 
    background-color: transparent; 
 
    border: none; 
 
    border-radius: 4px; 
 
    outline: none; 
 
    color: #fff; 
 
    padding: 0; 
 
    width: 25px; 
 
    cursor: pointer; 
 
    transform: translateY(3px); 
 
} 
 

 
.contact-menu-button > svg { 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 15px; 
 
    stroke: #fff; 
 
    transition: transform 250ms linear, border-radius 250ms ease-in 275ms; 
 
} 
 

 
.contact-menu-button > svg:hover { 
 
    background-color: #fff; 
 
    stroke: #4a7ff7; 
 
} 
 

 
.contact-menu-button > svg:active { 
 
    stroke: #fff; 
 
    background-color: #000; 
 
} 
 

 
.contact-menu-button > .rotate { 
 
    background-color: #000; 
 
    border-radius: 0 0 15px 15px; 
 
    transform: rotate(180deg); 
 
} 
 

 
.contact-menu-button > .rotate:hover { 
 
    background-color: #000; 
 
    stroke: #fff; 
 
} 
 

 
.contact-menu-items { 
 
    visibility: hidden; 
 
    height: 0; 
 
    overflow: hidden; 
 
    color: #fff; 
 
    position: absolute; 
 
    list-style-type: none; 
 
    padding: 10px 0; 
 
    margin: 0 5px 5px 5px; 
 
    border-radius: 6px 0 6px 6px; 
 
    background-color: #000; 
 
    transform: translate(-57px, -6px); 
 
    transition: visibility 250ms ease-out 550ms, height 250ms ease-out 550ms; 
 
} 
 

 
.contact-menu-items > li { 
 
    padding: 1px 15px 1px 15px; 
 
} 
 

 
.contact-menu-items.show { 
 
    visibility: visible; 
 
    height: 50px; 
 
} 
 

 
.contact-menu-items > li:hover { 
 
    background-color: #fff; 
 
    color: #000; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="container"> 
 
    <div class="active-contact"> 
 
    John Smith 
 
    </div> 
 
    <div class="contact-menu"> 
 
    <button class="contact-menu-button"> 
 
     <svg> 
 
     <path d="M4 9 l 6 5 l 6 -5" stroke-width="1.5" fill="none" /> 
 
     </svg> 
 
    </button> 
 
    <ul class="contact-menu-items"> 
 
     <li> 
 
     <a>Edit</a> 
 
     </li> 
 
     <li> 
 
     <a>Delete</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>