CSS过渡不适用于js触发的可点击下拉菜单

Question

我正在尝试在使用js切换类时应用CSS过渡，但是它不起作用。

我尝试在不使用js的情况下应用过渡，但是过渡也不起作用...

我要做的就是使下拉菜单/上拉菜单的外观平滑。 有什么想法吗？

<style>
    .navbar {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.navbar span {
    display: block;
    text-align: center;
    padding: 1vw 5vw 1vw 0px;
    text-decoration: none;
    font-size: 2.5vw;
}

#home {
    float: left;
}


.dropup {
    float: right;
    position: relative;
    display: inline-block;
}

.dropup-content {
    display: none;
    position: fixed;
    bottom: 3.5vw;
    min-width: 100vw;
    z-index: 1;
}

#clickContact {
    background-color: aqua;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

#clickAbout {
    background-color: red;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.show {
    display: block;
}
</style>

<footer>
    <div class="navbar">
      <span id="home">Home</span>

      <div>
        <span class="dropup" onclick="contactFunction()">Contact</span>
            <div class="dropup-content" id="clickContact">
                <p>some other stuff</p>
          </div>
        </div>
        <div>
        <span class="dropup" onclick="aboutFunction()">About</span>
            <div class="dropup-content" id="clickAbout">
                <p>Some stuff</p>
          </div>
        </div>
    </div>
</footer>


<script>
    function contactFunction() {
        document.getElementById("clickContact").classList.toggle("show");
        document.getElementById("clickAbout").classList.remove("show");
    }

    function aboutFunction() {
        document.getElementById("clickAbout").classList.toggle("show");
        document.getElementById("clickContact").classList.remove("show");
    }

    window.onclick = function(event) {
      if (!event.target.matches('.dropup')) {
        var dropdowns = document.getElementsByClassName("dropup-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains("show")) {
            openDropdown.classList.remove("show");
          }
        }
      }
    }
</script>

无论我把过渡放在哪里，它似乎都不起作用！