在哪里放置过渡 - 下拉菜单动画

Question

<div class="dropdown">
<button class="dropbtn">ALAT</button>
<div class="dropdown-content">
    <a href="index2.php"><img src="home.jpg" class="home" width="70px" height="50px" title="Dashboard"></a>
    <a href="papar_topik.php"><img src="quiz.jpg" class="quiz" width="70px" height="50px" title="Kuiz"></a> 
    <a href="prestasi_topik.php"><img src="prestasi.png" width="70px" height="50px" title="Prestasi Pelajar"></a> 
    <a href="senarai_pelajar.php"><img src="senarai.jpg" class="senarai" width="70px" height="50px" title="Senarai Pelajar"></a> 
    <a href="import_daftar.php"><img src="import.jpg" class="import" width="70px" height="50px" title="Import Daftar"></a> 
    <a href="#" onclick="logout()"><img src="logout.png" width="70px" height="50px" title="Keluar"></a>

以上是我制作下拉按钮的代码。当鼠标移动到按钮附近时，我想让下拉内容在过渡中出现。下面是我的 CSS 代码：

div{
        font-size: 20px;
        text-align: center;
        top: 170px;
        left: 1000px;
    }
    .dropbtn {
        background-color: aqua;
        color: black;
        padding: 16px;
        font-size: 20px;
        font-family: brush script mt;
        font-style: bold;
        border-radius: 50%;
    }

    .dropdown {
        position: fixed;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: fixed;
        background-color: cornsilk;
        width: 120px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        height: 0px;
        transition: all .5s ease;
    
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: yellow;
    }

    .dropdown:hover .dropdown-content {
        display: block;
        top: 10px;
        height: 1000px;
    }

但是，下拉内容没有显示任何过渡，而是像往常一样显示。任何人都可以指导我应该将“过渡”标签放在哪里？？？？

Answer 1

当我们想使用 display:none 到 display:block 的转换时，转换属性不起作用。原因是 display:none 属性用于删除块，而 display:block 属性用于显示块。无法部分显示块。要么可用，要么不可用。这就是转换属性不起作用的原因。 Reference

任何人都可以指导我应该在哪里放置“过渡”标签？ 您正在为正确的选择器使用转换属性，但您应该使用不透明度而不是使用显示属性。 在这里您可以看到我对您的 CSS 所做的更改。

    div{
        font-size: 20px;
        text-align: center;
        top: 170px;
        left: 1000px;
    }
    .dropbtn {
        background-color: aqua;
        color: black;
        padding: 16px;
        font-size: 20px;
        font-family: brush script mt;
        font-style: bold;
        border-radius: 50%;
    }

    .dropdown {
        position: fixed;
        display: inline-block;
    }

    .dropdown-content {
        opacity: 0;   // instead display:none use opactiy:0
        position: fixed;
        background-color: cornsilk;
        width: 120px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        height: 0px;
        transition: all 0.5s ease;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: yellow;
    }

    .dropdown:hover .dropdown-content {
        opacity: 1;   // instead display:block use opactiy:1
        top: 10px;
        height: 1000px;
    }

Answer 2

你可以用这个代替你的代码

div{
    font-size: 20px;
    text-align: center;
    top: 170px;
    left: 1000px;
}
.dropbtn {
    background-color: aqua;
    color: black;
    padding: 16px;
    font-size: 20px;
    font-family: brush script mt;
    font-style: bold;
    border-radius: 50%;
}

.dropdown {
    position: fixed;
    display: inline-block;
}

.dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    background-color: cornsilk;
    width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    height: 0px;
    transition: all .5s ease;

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: yellow;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 100;
    top: 10px;
    height: 1000px;
}