CSSでのフェードイン/フェードアウト効果

Question

CSSを使用したトランジション効果を得ることができません。ドロップダウンメニューをゆっくりとフェードインし、ユーザーがクリックするとゆっくりとフェードアウトさせたいと思います。メニューはul要素を使用して作成され、初期状態は非表示になっています。隠し状態はCSSスタイルで可能になり、可視状態になります。 2つのスタイルはjavascriptを使用して切り替えられます。

これは私の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 .:私はCSSに限定されています。私はJQueryを使うことはできません。

Answer 1

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

これはあなたが探しているものです。

あなたはWebKitの不透明度のフェードを使用することができますjquery.

エルス

を使用して試すことができます。

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

} 

Answer 2

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>