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-hiddne”替换为“username-menu-visible”。只是没有过渡效应。菜单就会立刻出现。

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);

}

Answer 2

user30646，您的CSS看起来很棒，除了使用“visibility”而不是“display”。这是一个有效的例子：

<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>

使用CSS淡入/淡出效果

2 个答案: