為什么我的CSS只向一個(gè)方向轉(zhuǎn)換？

我正在使用下面的代碼，它在很大程度上是有效的。點(diǎn)擊btn1/2/3動(dòng)畫邊距& amp可見性，因此舊塊淡出并上移，但新塊會(huì)立即出現(xiàn)并跟隨舊塊上移-在顯示塊時(shí)，不存在可見性的過渡。

該頁面由一個(gè)接一個(gè)出現(xiàn)的節(jié)組成，順序?yàn)? quot菜單選項(xiàng)& quot，& quot概述& quot，& quot能力& quot，& quot方法& quot。

編輯:請注意& quot顯示& quot對于新元素來說是立即的，使它立即占據(jù)頁面上的空間，但是它的可見性和位置(通過邊距)仍然應(yīng)該轉(zhuǎn)換。當(dāng)設(shè)置為“無”時(shí)，顯示會(huì)延遲，以便僅在變得不可見后才消失。

在這里創(chuàng)建了一個(gè)無用的示例實(shí)現(xiàn):https://codepen.io/Sam-Vincent/pen/KKGbxXY

<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;

  // Shows whichever element
  function show(element){
  element.style.display = "flex";
  element.style.visibility = "visible";
  element.style.opacity = 1;
  element.style.marginTop = "1px";
  }

  // Hides whichever Element if it"s shown
  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);
  }

  // The action taken on clicking Back button
  function clickBack(){
    show(menu);
    hide(shown);
    shown = menu;
  }

  // The action taken on clicking Brief Overview button
  function clickOverview(){
    hide(shown);
    show(section1);
    shown = section1;
  }

  // The action taken on clicking Capabilities button
  function clickCapabilities(){
    hide(shown);
    show(section2);
    shown = section2;
  }

  // The action taken on clicking Approach button
  function clickApproach(){
    hide(shown);
    show(section3);
    shown = section3;
  }

  //Add event listener to back buttons
  function listenBack(button){
    button.addEventListener("click", clickBack);
  }
  for (let index = 0; index < btnback.length; ++index) {
    listenBack(btnback[index]);
  }

  //Add event listener to Overview buttons
  function listenOverview(button){
    button.addEventListener("click", clickOverview);
  }
  for (let index = 0; index < btn1.length; ++index) {
    listenOverview(btn1[index])
  }

  //Add event listener to Capabilities buttons
  function listenCapabilities(button){
    button.addEventListener("click", clickCapabilities);
  }
  for (let index = 0; index < btn2.length; ++index) {
    listenCapabilities(btn2[index])
  }

  //Add event listener to Approach buttons
  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>

在css中， 顯示:'無'-& gt；顯示:“塊”不接受任何轉(zhuǎn)換。 并且立即出現(xiàn)。 您應(yīng)該使用as 不透明度:0 ->不透明度:1 它將接受過渡。