为何我的CSS过渡仅在单个方向生效？技术求助

我用以下代码实现页面区块切换功能，点击btn1/2/3按钮时，旧区块可以正常向上淡出，但新区块会直接立即显示并跟随移动，没有显示过渡效果。页面区块按menu-options、overview、capabilities、approach的顺序依次排列。

注：设置新元素的display: flex是为了让它立即占据页面空间，但它的visibility、opacity及margin属性仍需要过渡效果；设置display: none时延迟执行，是为了确保元素先不可见再消失。

实现代码 #

<script>
document.addEventListener("DOMContentLoaded", function () {

  var btnback = document.getElementsByClassName("button-back");
  var btn1 = document.getElementsByClassName("button-overview");
  var btn2 = document.getElementsByClassName("button-capabilities");
  var btn3 = document.getElementsByClassName("button-approach");

  var menu = document.getElementById("menu-options");
  var section1 = document.getElementById("overview");
  var section2 = document.getElementById("capabilities");
  var section3 = document.getElementById("approach");

  var shown = menu;

  // 显示指定元素
  function show(element){
  element.style.display = "flex";
  element.style.visibility = "visible";
  element.style.opacity = 1;
  element.style.marginTop = "1px";
  }

  // 隐藏当前显示的元素
  function hide(element){
    element.style.marginTop = "calc(calc(100vh - 120px) * -1)";
    element.style.visibility = "hidden";
    element.style.opacity = 0;
    setTimeout(function(){
        element.style.display = "none";
    }, 1200);
  }

  // 返回按钮点击事件
  function clickBack(){
    show(menu);
    hide(shown);
    shown = menu;
  }

  // 概览按钮点击事件
  function clickOverview(){
    hide(shown);
    show(section1);
    shown = section1;
  }

  // 功能按钮点击事件
  function clickCapabilities(){
    hide(shown);
    show(section2);
    shown = section2;
  }

  // 方法按钮点击事件
  function clickApproach(){
    hide(shown);
    show(section3);
    shown = section3;
  }

  // 为返回按钮添加事件监听
  function listenBack(button){
    button.addEventListener("click", clickBack);
  }
  for (let index = 0; index < btnback.length; ++index) {
    listenBack(btnback[index]);
  }

  // 为概览按钮添加事件监听
  function listenOverview(button){
    button.addEventListener("click", clickOverview);
  }
  for (let index = 0; index < btn1.length; ++index) {
    listenOverview(btn1[index])
  }

  // 为功能按钮添加事件监听
  function listenCapabilities(button){
    button.addEventListener("click", clickCapabilities);
  }
  for (let index = 0; index < btn2.length; ++index) {
    listenCapabilities(btn2[index])
  }

  // 为方法按钮添加事件监听
  function listenApproach(button){
    button.addEventListener("click", clickApproach);
  }
  for (let index = 0; index < btn3.length; ++index) {
    listenApproach(btn3[index])
  }

  function fastHide(element){
    element.style.transitionDuration = "0s";
    hide(element);
    element.style.transition = "all 1.2s ease";
  }
  fastHide(section1);
  fastHide(section2);
  fastHide(section3);
});
</script>
<style>
#menu-options, #overview, #capabilities, #approach {
  transition: all 1.2s ease-in-out;
}
</style>

内容的提问来源于stack exchange，提问作者Sam Vincent