CSS轉換不適用於transform：翻譯

的transform物業的工作，但我希望它發生緩慢..

我的無禮看起來像這樣

.mobile-nav 
    display: none 
    position: relative 
    width: 100% 
    background: $white 
    padding: 30px 0 20px 
    transform: translateY(-100%) 

    @media (max-width: 775px) 
    .mobile-nav.is-o 
     display: block 
     transform: translateY(0%)

來源

2016-07-28 Codehan25

你面臨的主要障礙在於display屬性不是動畫。

與電燈開關一樣，display: none已關閉，display: block已打開。沒有中間立場，沒有淡入淡出效果，沒有CSS轉換。

但是，您可以使用多個其他屬性進行轉換。其中：

height
opacity
z-index
background-color

下面是一個例子：

.mobile-nav-toggle { 
 
    font-size: 2em; 
 
    cursor: pointer; 
 
} 
 
.mobile-nav { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    width: 0; 
 
    height: 0; 
 
    opacity: 0; 
 
    transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s; 
 
} 
 
.mobile-nav-toggle:hover + .mobile-nav { 
 
    width: 150px; 
 
    height: 150px; 
 
    opacity: 1; 
 
    background-color: lightgreen; 
 
    transition: 1s; 
 
}

<div class="mobile-nav-toggle">&#9776;</div> 
 
<div class="mobile-nav"> 
 
    <ul> 
 
    <li><a>Item</a></li> 
 
    <li><a>Item</a></li> 
 
    <li><a>Item</a></li> 
 
    </ul> 
 
</div>

個

參考文獻：

來源

2016-07-28 18:41:29

..完美解決方案！它現在正在工作...... Thx！ – Codehan25

我個人使用不透明與知名度相結合，實現淡入淡出效果就像我想對於整個元素。請記住操縱z-index，這樣當你消失時，「隱藏」的對象將不會被點擊。

來源

2016-07-29 12:07:58 Malyo

使用'opacity'和'z-index'，爲什麼需要'visibility'？ –

對於一些罕見的情況，這是一個安全的玩法，元素是在沒有背景和/或比它大的元素下。 – Malyo

CSS轉換不適用於transform：翻譯

回答

相關問題