我似乎无法使用 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。
最佳答案
$("button").click(function(){
$("element").fadeIn();
});
这就是您要找的。p>
您可以尝试使用 jquery.
否则你可以使用 webkit opacity fade。
function clickeventhandler(evt){
var element = document.getElementById(evt.target.id);
fade(element);
}
关于html - 使用 CSS 实现淡入/淡出效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41367167/