過渡 - VoidCC

我想有一個具有子菜單的菜單，這是我的時刻（這是更復雜的比這個），我想用過渡性質：過渡

.product:hover #button-option { 
    visibility: visible !important; 
} 
#button-option { 
    visibility: hidden; 
    -webkit-transition: visibility .2s; 
    transition: visibility .2s; 
}

這裏是我的jsfiddle：http://jsfiddle.net/4bsmq2kg/

我希望我的子菜單以後出現了一點，還是喜歡花一些時間來出現像在這裏：http://www.vmware.com

如何才能使這項工作？我嘗試了幾件事，但都沒有工作。謝謝！

編輯：我真的很愚蠢，並沒有意識到代碼中存在錯誤，但我仍然無法找到我真正想要找到的東西。

來源

2014-08-28 Lohn Claidon

發佈您的html代碼也可以做一個小提琴。 – Manwal 2014-08-28 04:38:03

[使用CSS3轉換動畫化非動畫屬性]（http://stackoverflow.com/questions/11605637/animating-non-animatable-properties-with-css3-transitions） – 2014-08-28 04:41:58

這與兄弟姐妹有什麼關係組合子？ – 2014-08-28 04:47:23

可見性將會過渡，但僅限於二進制（開/關）方式。也許你還想在opacity上轉換（因爲visibility需要關閉以防止元素上的鼠標檢測）。您可能也不需要/想要!important。另外，除非您定位舊瀏覽器版本，否則不需要webkit-transition前綴屬性（如果您要指定它，則應爲-webkit-transition）。

來源

2014-08-28 04:37:58

如果我把不透明度，子菜單將「永遠」在那裏，但只是看不見，所以它下面的內容將無法訪問。我想要這樣的子菜單：http://vmware.com – 2014-08-28 05:10:31

你需要結合'visiblility'和'opacity';看到這個問題被標記爲可能的重複的問題。 – 2014-08-28 05:13:16

可見性不會很好。如果您需要的菜單滑動由左到右

#button-option { 
    opacity: 0; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 
.product:hover #button-option { 
    opacity: 1; 
}

，那麼你也可以用動畫的位置：對於您可以更好地製作動畫的不透明度

#button-option { 
    left: -300px; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 
.product:hover #button-option { 
    left: 0px; 
}

您可以檢查更詳細here。

來源

2014-08-28 05:12:16 Husen

最後，我混合了可見性，謝謝大家！也會嘗試一些你的建議，晚安！

來源

2014-08-28 05:18:41

過渡

回答

相關問題