[英]How to add transitions to a drop down menu?
I have a drop-down menu that makes text appear when clicked.我有一个下拉菜单,单击时会显示文本。 However, when I add transitions to it, nothing happens.
但是,当我向它添加过渡时,什么也没有发生。 It still just shows up without sliding down.
它仍然只是显示而没有滑落。 I want the transition to show the text gradually from top to bottom as it appears.
我希望过渡在文本出现时从上到下逐渐显示文本。
This is the CSS:这是 CSS:
.drop-down {
display: flex;
flex-direction: column;
text-align: left;
transition: height 0.3s ease-in-out;
transition-delay: 0.1s;
overflow: hidden;
position: relative;
}
.menu
is the class name for the button clicked that shows this .drop-down
text. .menu
是显示此.drop-down
文本的单击按钮的 class 名称。
I don't know if I used the transition
properly.我不知道我是否正确使用了
transition
。
Should I have used JavaScript instead?我应该改用 JavaScript 吗? And if not what do I need to change?
如果不是,我需要改变什么?
JavaScript Code: JavaScript 代码:
const menu = document.querySelector('.menu')
const menuContent = document.querySelector('.drop-down')
menu.addEventListener('click', menuClick, false);
menuContent.style.display = 'none'
function menuClick() {
menuContent.classList.toggle('show');
if (menuContent.style.display == 'none') {
menuContent.style.display = 'block'
} else {
menuContent.style.display = 'none'
}
}
You can do this without javascript.您可以在没有 javascript 的情况下执行此操作。
.drop-down { display: flex; flex-direction: column; text-align: left; transition: height 0.3s ease-in-out; transition-delay: 0.1s; overflow: hidden; position: relative; opacity:0; visibility:hidden; }.menu:hover.drop-down{ opacity:1; visibility:visible; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.