Question

我的HTML部分显示了一个＆＃34; pane＆＃34;一次。这些＆＃34;窗格＆＃34;高度不一。我有一个按钮 - 当点击时 - 隐藏一个窗格并显示另一个窗格。我想要做的就是让这个过程平稳过渡而不会使用CSS。如果窗格小于或大于其容器，则容器应平滑地折叠或展开以适应新窗格所需的高度。

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

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>

LESS：

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

然而，没有任何过渡似乎有效。我做错了什么？

Codepen：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>

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

1 个答案: