動畫css下拉懸停菜單

我已經制作了一個小的CSS下拉按鈕/菜單，我現在試圖動畫。動畫css下拉懸停菜單

我不得不徘徊在父母的時候開始從display: none去display:block菜單，但我不能動畫這一點 - 所以我試圖交換到opacity: 0, height: 0到opacity: 1, height: auto但這導致與菜單一些奇怪的功能。讓我告訴你我的意思。這裏是原來的菜單代碼：

HTML：

<div className="account-dropdown"> 
     <button className="dropbtn"> 
     <FormattedMessage 
      id="header.account" 
      defaultMessage={`Account`} /> 
     </button> 
     <div className="dropdown-content"> 

     <a>Order History</a> 
     <a>Settings</a> 
     <a onClick={logOut}>Logout</a> 

     </div> 
    </div>

的SCSS：

.account-dropdown { 
    position: relative; 
    display: inline-block; 

    &:hover { 
     .dropdown-content { 
     display: block; 

     } 

     .dropbtn { 
     color: red; 
     } 
    } 

    .dropbtn { 
     border: none; 
     cursor: pointer; 
     margin: 2rem 1rem; 
     transition: all 0.3s; 
     color: black; 
     background-color: #fff; 
    } 

    .dropdown-content { 
     display: none; 
     padding: 3rem 3rem 1rem 3rem; 
     position: absolute; 
     top: 5rem; 
     left: -17.6rem; 
     background-color: #fff; 
     min-width: 250px; 
     width: 100%; 
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 
     border: solid 1px #e8e8e8; 
     z-index: 1; 
     color: rgba(0, 0, 0, 0); 
     transition: all 0.3s; 

     &:after, &:before { 
     bottom: 100%; 
     border: solid transparent; 
     content: " "; 
     height: 0; 
     width: 0; 
     position: absolute; 
     pointer-events: none; 
     } 

     &:after { 
     border-color: rgba(255, 255, 255, 0); 
     border-bottom-color: #ffffff; 
     border-width: 7px; 
     left: 75%; 
     margin-left: 26px; 
     } 
     &:before { 
     border-color: rgba(113, 158, 206, 0); 
     border-bottom-color: #e8e8e8; 
     border-width: 8px; 
     left: 75%; 
     margin-left: 25px; 
     } 


     a { 
     text-align: left; 
     color: black; 
     padding-bottom: .8rem; 
     text-decoration: none; 
     display: block; 
     cursor: pointer; 
     transition: all 0.3s; 

     &:hover { 
      color: black; 
     } 

     &:last-child { 
      margin-top: .4rem; 
      padding-top: .8rem; 
      border-top: solid 1px #e8e8e8; 
     } 
     } 
    } 
    }

這是在小提琴上運行（不REMS或SCSS瓦爾）https://jsfiddle.net/tqf1r0mm/7/

當我將顯示器交換爲不透明度和高度時，這裏是一個小提琴 - >https://jsfiddle.net/tqf1r0mm/10/。

你可以看到動畫是非常棒的，而且如果你將鼠標懸停在賬戶按鈕下方，菜單打開（我只想在用戶懸停帳戶時打開它）。

關於如何解決這個問題，以獲得一個很好的流暢動畫的任何想法？任何建議都會很棒。謝謝！

來源

2017-03-25 ajmajmajma

您可以使用屬性附加傷害過渡：一切，是因爲動畫看起來像

，但使用的高度：0;你可以使用：visibility：hidden;和知名度：懸停可見，以避免動畫問題

像這樣

.test { 
padding-left: 300px; 

.account-dropdown { 
position: relative; 
display: inline-block; 
&:hover { 
    .dropdown-content { 
    opacity: 1; 
    visibility:visible; 
    } 
    .dropbtn { 
    color: black; 
    } 
} 
.dropbtn { 
    border: none; 
    cursor: pointer; 
    margin: 20px 10px; 
    transition: all 0.3s; 
    color: black; 
    background-color: #fff; 
} 
.dropdown-content { 
    opacity: 0; 
    visibility:hidden; 
    padding: 3rem 3rem 1rem 3rem; 
    position: absolute; 
    top: 50px; 
    left: -176px; 
    background-color: #fff; 
    min-width: 250px; 
    width: 100%; 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 
    border: solid 1px #e8e8e8; 
    z-index: 1; 
    color: rgba(0, 0, 0, 0); 
    transition: all 0.3s; 
    &:after, 
    &:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    } 
    &:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-bottom-color: #ffffff; 
    border-width: 7px; 
    left: 75%; 
    margin-left: 26px; 
    } 
    &:before { 
    border-color: rgba(113, 158, 206, 0); 
    border-bottom-color: #e8e8e8; 
    border-width: 8px; 
    left: 75%; 
    margin-left: 25px; 
    } 
    a { 
    text-align: left; 
    color: black; 
    padding-bottom: 8px; 
    text-decoration: none; 
    display: block; 
    cursor: pointer; 
    transition: all 0.3s; 
    &:hover { 
     color: black; 
    } 
    &:last-child { 
     margin-top: 4px; 
     padding-top: 8px; 
     border-top: solid 1px #e8e8e8; 
    } 
    } 
} 
} 
}

來源

2017-03-25 21:09:26 Argenis

您是否想要添加別的東西？ – ajmajmajma

抱歉，這是我第一次在這裏回答，我編輯了答案，我的意思是你可以取代高度：0;和高度：自動;通過可見性：隱藏;和可見性：可見; – Argenis

使用的知名度，而不是高度，而是使用不透明度爲好，因爲你也不能動畫的知名度。同時將觸發器放在.dropbtn而不是.account-dropdown上，以避免在您將鼠標懸停在除按鈕之外的任何地方時激活懸停狀態。

我不知道SCSS，所以我用CodePen轉換爲常規的CSS。下面是我使用的代碼：

.test { 
 
    padding-left: 300px; 
 
} 
 

 
.test .account-dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.test .account-dropdown .dropbtn:hover~.dropdown-content { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.test .account-dropdown .dropdown-content:hover { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.test .account-dropdown:hover .dropbtn { 
 
    color: black; 
 
} 
 

 
.test .account-dropdown .dropbtn { 
 
    border: none; 
 
    cursor: pointer; 
 
    margin: 20px 10px; 
 
    transition: all 0.3s; 
 
    color: black; 
 
    background-color: #fff; 
 
} 
 

 
.test .account-dropdown .dropdown-content { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    padding: 3rem 3rem 1rem 3rem; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: -176px; 
 
    background-color: #fff; 
 
    min-width: 250px; 
 
    width: 100%; 
 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 
 
    border: solid 1px #e8e8e8; 
 
    z-index: 1; 
 
    color: transparent; 
 
    transition: all 0.3s; 
 
} 
 

 
.test .account-dropdown .dropdown-content:after, 
 
.test .account-dropdown .dropdown-content:before { 
 
    bottom: 100%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.test .account-dropdown .dropdown-content:after { 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-bottom-color: #ffffff; 
 
    border-width: 7px; 
 
    left: 75%; 
 
    margin-left: 26px; 
 
} 
 

 
.test .account-dropdown .dropdown-content:before { 
 
    border-color: rgba(113, 158, 206, 0); 
 
    border-bottom-color: #e8e8e8; 
 
    border-width: 8px; 
 
    left: 75%; 
 
    margin-left: 25px; 
 
} 
 

 
.test .account-dropdown .dropdown-content a { 
 
    text-align: left; 
 
    color: black; 
 
    padding-bottom: 8px; 
 
    text-decoration: none; 
 
    display: block; 
 
    cursor: pointer; 
 
    transition: all 0.3s; 
 
} 
 

 
.test .account-dropdown .dropdown-content a:hover { 
 
    color: black; 
 
} 
 

 
.test .account-dropdown .dropdown-content a:last-child { 
 
    margin-top: 4px; 
 
    padding-top: 8px; 
 
    border-top: solid 1px #e8e8e8; 
 
}

<div class="test"> 
 
    <div class="account-dropdown"> 
 
    <button class="dropbtn"> 
 
     Account 
 
    </button> 
 
    <div class="dropdown-content"> 
 

 
     <a>Order History</a> 
 
     <a>Settings</a> 
 
     <a>Logout</a> 
 

 
    </div> 
 
    </div> 
 
</div>

我還添加了，當你將鼠標懸停在.dropdown含量另一個懸停類，否則當您嘗試點擊一個鏈接dissappears。

來源

2017-03-25 21:22:57 Sean

動畫css下拉懸停菜單

回答

相關問題