如何将过渡添加到下拉菜单？

Question

我有一个下拉菜单，单击时会显示文本。 但是，当我向它添加过渡时，什么也没有发生。 它仍然只是显示而没有滑落。 我希望过渡在文本出现时从上到下逐渐显示文本。

这是 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是显示此.drop-down文本的单击按钮的 class 名称。

我不知道我是否正确使用了transition 。

我应该改用 JavaScript 吗？ 如果不是，我需要改变什么？

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

Answer 1

您可以在没有 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; }