html - 使用 CSS 实现淡入/淡出效果

Question

我似乎无法使用 CSS 获得过渡效果。我想让我的下拉菜单在用户单击时缓慢淡入和淡出。菜单是使用 ul 元素构建的，初始状态是隐藏的。隐藏状态是通过 CSS 样式实现的，可见状态也是如此。使用 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 功能正在运行，它用“username-menu-visible”替换了“username-menu-hiddne”。只是没有过渡效果。菜单立即出现。

P.S:我仅限于 CSS。我不会使用 JQuery。

Answer 1

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

这就是您要找的。

您可以尝试使用 jquery.

否则你可以使用 webkit opacity fade。

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

}