javascript - 显示/隐藏带有 CSS 过渡的可变高度面板不起作用

Question

我的 HTML 有一部分一次显示一个“ Pane ”。这些“ Pane ”的高度各不相同。我有一个按钮 - 单击时 - 隐藏一个 Pane 并显示另一个 Pane 。我想做的是仅使用 CSS 实现平稳过渡，而不会出现任何抖动。如果 Pane 小于或大于其容器，容器应平滑折叠或展开以适应新 Pane 所需的高度。

到目前为止，我有以下内容:

JS:

$("button").click(function(){
  $("#get-started").addClass("hiddenFade");
  $("#get-started-2").removeClass("hiddenFade");
}) 

HTML:

<div class="container">

<div id="get-started" class="box fadeInOut">
  TEST
</div>
<div id="get-started-2" class="box fadeInOut hiddenFade">
  NEWTEST
</div>
</div>
<button>
  go
</button>

减少:

.box{
  background: red;
  width: 100%;
  height: 200px;
  text-align: center;
  color: white;
}  

.container{
  border: 1px solid green;
  width: 400px;
  margin:auto;
}

.fadeInOut {
        transition-duration: 0, 200ms;
        transition-property: visibility, opacity, height;
        transition-delay: 0;
        height: auto;
        opacity: 1; 

        &.hiddenFade {
            visibility: hidden;
            opacity: 0;
            transition-duration: 200ms, 0;
            transition-property: opacity, visibility, height;
            transition-delay: 0, 200ms;
            height: 0 !important;
        }
    }

#get-started-2{
  height: 300px;
  background: green;
}

但是，所有转换似乎都不起作用。我做错了什么？

代码笔:https://codepen.io/anon/pen/jxPXZv

Answer 1

对于 transition-... 属性，即使您使用 0，您也必须指定测量单位。

transition-duration: 0ms, 200ms;

代替

transition-duration: 0, 200ms;

transition-delay 也是如此。

在解决这个问题之后，它似乎按预期工作:

$("button").click(function(){
  $("#get-started, #get-started-2").toggleClass("hiddenFade");
}) 

.box{
  background: red;
  width: 100%;
  height: 200px;
  text-align: center;
  color: white;
}  

.container{
  border: 1px solid green;
  width: 400px;
  margin:auto;
}

.fadeInOut {
        transition-duration: 0ms, 200ms;
        transition-property: visibility, opacity, height;
        transition-delay: 0ms;
        height: auto;
        opacity: 1; 
}
        .fadeInOut.hiddenFade {
            visibility: hidden;
            opacity: 0;
            transition-duration: 200ms, 0ms;
            transition-property: opacity, visibility, height;
            transition-delay: 0ms, 200ms;
            height: 0 !important;
        }
    

#get-started-2{
  height: 300px;
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<div id="get-started" class="box fadeInOut">
  TEST
</div>
<div id="get-started-2" class="box fadeInOut hiddenFade">
  NEWTEST
</div>
</div>
<button>
  go
</button>