我創建了一個切換選單，我使用了我的真實專案源代碼，以免混淆：-
div.btn-dropdown-options {
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
position: absolute;
z-index: 1;
bottom: calc(100% 8px);
left: 0;
min-width: 180px;
margin-top: 4px;
padding: 8px;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 8px;
background: #fff;
display: none;
-webkit-box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%);
box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%);
}
full code: - https://jsfiddle.net/bnpehzjw/
.
我為div.btn-dropdown-options添加了一個 css 過渡效果，并且我使用了visibility: hidden; 能見度：可見；.
當我單擊選單切換以顯示選單時，過渡效果很好。但是，當我再次單擊選單切換以隱藏選單時，轉換不起作用。
我做錯了什么？
uj5u.com熱心網友回復：
TL;博士。請參閱下面的代碼片段，該代碼片段與您的原始代碼略有不同。
幾點注意事項：
- 考慮使用
button而不是a標簽。它是一個在單擊時執行某些操作的按鈕，而不是在單擊時指向鏈接的超鏈接。 - 小心過于具體的 CSS 規則。
div.button-dropdown-options（即元素名稱 類名稱）比.button-dropdown-options（即僅類名稱）更具體，并且可以勝過其他不太具體的選擇器。這就是讓你!important在多個地方過度依賴的原因。過度!important的特異性和組合將使除錯樣式變得非常困難。 visibility作為transition財產的一部分。也就是說，像transition: opacity 2s, visibility 2s;
function showDropDown() {
const variantButton = document.getElementById('showdropdown');
const variantMenu = document.getElementById('variantMenu');
const animate_arrow = document.querySelector('.btn-dropdown-caret');
const options = document.querySelector('.btn-dropdown-options');
const over = document.querySelector('.swiper-container');
const calculatedOptions = window.getComputedStyle(options);
variantButton.addEventListener('click', function(event) {
variantMenu.classList.toggle('dropdownShow');
animate_arrow.classList.toggle('animate-arrow');
});
}
showDropDown();.btn-dropdown {
display: block;
position: relative;
white-space: nowrap;
margin-top: 5px;
margin-left: 2px;
}
@media screen and (min-width: 768px) {
.btn-dropdown {
z-index: 4;
}
}
.btn-dropdown .btn-dropdown-link {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.form-btn.outlined.btn-dropdown-link {
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
/* -webkit-transition: color 200ms ease;
transition: color 200ms ease; */
border: 1px solid #dddddd;
box-shadow: none;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently */
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
color: #6e6d7a;
}
.form-btn.outlined.btn-dropdown-link:hover,
.form-btn.outlined.btn-dropdown-link:focus {
border: 1px solid #e4b29b;
color: #1b1b1b;
box-shadow: 0 0 0 2px rgb(228 178 155 / 10%);
}
.form-btn.outlined.btn-dropdown-link:hover svg,
.form-btn.outlined.btn-dropdown-link:focus svg {
fill: #666666;
}
.animate-arrow {
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: translateY(-50%) rotate(180deg) !important;
}
.form-btn.outlined,
a.form-btn.outlined {
background-color: transparent;
-webkit-box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
color: #0d0c22;
}
.btn-dropdown .btn-dropdown-link {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 35px;
text-align: left;
}
.form-btn,
a.form-btn {
background: #f3f3f4;
color: #0d0c22;
}
.form-btn,
a.form-btn {
display: inline-block;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 40px;
padding: 10px 16px;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
border: none;
border-radius: 10px;
outline: none;
background: #ea4c89;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
/* Variant Selector --Span */
.btn-dropdown.btn-dropdown-neue svg.btn-dropdown-caret {
fill: #9e9ea7;
}
.btn-dropdown svg.btn-dropdown-caret {
position: absolute;
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin: 0;
-webkit-transform: translateY(-50%) rotate(0deg);
-ms-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
fill: currentColor;
}
.form-btn svg,
button.form-btn svg {
width: 13px;
height: 13px;
margin-top: -3px;
margin-right: 2px;
fill: currentColor;
vertical-align: middle;
}
/* DropDown */
.btn-dropdown .btn-dropdown-options {
right: 0;
}
.btn-dropdown div.btn-dropdown-options {
z-index: 2;
}
.btn-dropdown-options {
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
position: absolute;
z-index: 1;
top: calc(100% 8px);
left: 0;
min-width: 180px;
margin-top: 4px;
overflow: auto;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 8px;
background: #fff;
visibility: hidden;
opacity: 0;
transition: opacity 2s, visibility 2s;
box-shadow: 0px 1px 2px rgba(128, 138, 157, 0.12), 0px 8px 32px rgba(128, 138, 157, 0.24);
}
.btn-dropdown-options ul {
padding: 8px 0;
list-style: none;
}
.btn-dropdown-options li.active a {
color: #ea4c89;
font-weight: 500;
text-decoration: none;
}
.btn-dropdown-options a {
display: block;
padding: 8px 15px;
color: #6e6d7a;
font-size: 13px;
text-decoration: none;
}
.btn-dropdown-options.dropdownShow {
/* animation: 0.3s ease 0s 1 normal forwards running dropdownAnimation !important; */
visibility: visible;
opacity: 1;
}
.visuallyhidden {
opacity: 0;
}<span class="btn-dropdown btn-dropdown-neue">
<button id="showdropdown" class="form-btn outlined btn-dropdown-link" data-dropdown-state="closed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" class="icon btn-dropdown-caret">
<path d="M21.5265 8.77171C22.1578 8.13764 22.1578 7.10962 21.5265 6.47555C20.8951 5.84148 19.8714 5.84148 19.24 6.47555L11.9999 13.7465L4.75996 6.47573C4.12858 5.84166 3.10492 5.84166 2.47354 6.47573C1.84215 7.10979 1.84215 8.13782 2.47354 8.77188L10.8332 17.1671C10.8408 17.1751 10.8486 17.183 10.8565 17.1909C11.0636 17.399 11.313 17.5388 11.577 17.6103C11.5834 17.6121 11.5899 17.6138 11.5964 17.6154C12.132 17.7536 12.7242 17.6122 13.1435 17.1911C13.1539 17.1807 13.1641 17.1702 13.1742 17.1596L21.5265 8.77171Z"></path>
</svg>
<span data-prompt="Variant" data-fade-default="true" class="default-option">
Sandle Brown
</span>
</button>
<div id="variantMenu" class="btn-dropdown-options sets-querystring">
<ul>
<li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option"><a href="?timeframe=">Now</a></li>
</ul>
</div>
</span>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/436218.html
標籤：javascript html css 动画 过渡