使用CSS淡入/淡出效果

我似乎無法獲得使用CSS的過渡效果。我想讓我的下拉菜單在用戶點擊時慢慢地淡入淡出。該菜單是使用ul元素構建的，初始狀態是隱藏的。隱藏狀態通過CSS樣式成爲可能，並且可見狀態也是如此。這兩種樣式使用JavaScript切換。使用CSS淡入/淡出效果

這是我的CSS樣式：

.username-menu-hidden { 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
    display: none; 
} 

.username-menu-visible { 
    opacity: 1; 
    transition: opacity 6s linear; 
    display: block; 
}

這是菜單：

<ul class="username-menu username-menu-hidden" id="user-menu">

的onclick功能正在工作，它取代了「用戶名，菜單hiddne」與「用戶名菜單可見」。它只是沒有過渡效果。菜單剛剛出現。

P.S：我只限於CSS。我無法使用JQuery。

來源

2016-12-28 user30646

$("button").click(function(){ 
    $("element").fadeIn(); 
});

這就是你要找的。

您可以嘗試使用jquery.

否則，你可以使用WebKit的不透明度淡出。

function clickeventhandler(evt){ 
    var element = document.getElementById(evt.target.id); 
    fade(element); 

}

來源

2016-12-28 17:48:48 coderredoc

不，我不允許使用jQuery。 – user30646

但是你知道爲什麼我的CSS不能按預期工作嗎？ – user30646

@ user30646：也許瀏覽器存在一些兼容問題，請先檢查它。 – coderredoc

user30646，你的CSS看起來不錯，除了使用「知名度」，而不是「顯示」。這是一個工作示例：

<a href="javascript:void();" onclick="openMenu();">Top level</a> 
<ul class="username-menu username-menu-hidden" id="user-menu"> 
    <li>Second level</li> 
</ul> 

<script> 
function openMenu() { 
    myButtonClasses.add("username-menu-visible"); 
} 
var myButtonClasses = document.getElementById("user-menu").classList; 
</script> 

<style> 
.username-menu-hidden { 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
    visibility:hidden; 
} 
.username-menu-visible { 
    opacity: 1; 
    transition: opacity 6s linear; 
    visibility:visible; 
} 
</style>

來源

2016-12-28 18:32:48

我無法獲得可見性工作。如果我使用可見性而不是顯示，菜單甚至不會顯示出來。你知道可能是什麼原因嗎？ – user30646

使用CSS淡入/淡出效果

回答

相關問題