过渡不适用于 height:0px答案

【问题标题】：Transition is not working for height:0px过渡不适用于 height:0px
【发布时间】：2018-06-02 10:22:33
【问题描述】：

我试图在点击页面底部的按钮时显示一个 div，所以我为此提供了一个平滑的过渡。问题是当我单击按钮时，它会显示一个带有过渡的 div，但在取消显示它时它会一直关闭而没有任何过渡。这里是sn-p

<div class="jump reveal">  <!-- media -->
   <!-- Thumbnail images -->
   <div class="row" id="gallry">   <!-- imagecontainer -->
    <div class="column">
    <img class="demo cursor" src="random.png" style="max-width:100%" 
      alt="Page 1">
  </div>
 </div>

</div>
  <a class="button page expand " id="caption"></a>
</div>
</div>

CSS：

.jump{
    display: none;
    background-color:#2f2f2f;
    transition: 2s all linear;
    }
   @-webkit-keyframes slideup{
    0%{bottom: -200px}
    100%{bottom: 0px}
   }
  .page{
      position:fixed;
      bottom: 0px;
     left: 75%;
     width: 80px;
     height: 25px;``
     font-size: 1rem;
     color: white;
     padding-top: 4px;
     margin-bottom: 0;
     text-align: center;
     background-color: black;
     border-radius: 10px 10px 0 0;
     z-index: 2;
     transition: 0.2s all ease;
     -webkit-transition:0.2s all ease;
     -o-transition:0.2s all ease;
   }
   .expand{
     bottom: 250px;
     position: fixed;
     transition: 0.2s all ease;
     -o-transition:0.2s all ease;
     -webkit-transition:0.2s all ease;
     z-index: 2;
     margin-bottom: 0px;
     cursor: pointer;
    }
  .reveal{
    position: fixed;
    width: 100%;
    height: 250px;
   float: left;
   background-color: black;
   overflow-x: auto;
  -ms-overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-y: hidden;
  white-space: nowrap;
  bottom: 0px;
  -webkit-animation:slideup 0.2s ease;
  animation: slideup 0.2s ease;
  -o-animation:slideup 0.2s ease;
  border-top:1px solid black;
  display: inline-block;
  z-index: 3;
 }

jquery:

  $(".page").click(function() {
    $(this).toggleClass("expand");
    $(".jump").toggleClass("reveal");
 }

【问题讨论】：

因为你忘了关闭 perantis ！ Working Fiddle
tq @pedram 但这并不能解决我的查询，就像在操场上一样，当您取消显示按钮时，您会看到按钮突然移动到底部。
我正在尝试实现平滑过渡，即使在隐藏 div 时也是如此。
和@Pedram 你所说的“父母”到底是什么意思？
$(".page").click(function() { 你在这里打开parentis，在function 之前，但最后没有关闭。

标签： jquery html css transition

【解决方案1】：

当你使用-webkit-animation:slideup 0.2s ease; animation: slideup 0.2s ease; -o-animation:slideup 0.2s ease;在main <div>下面如果在div下面重用，会影响两次=-webkit-animation:slideup 0.4s ease;....

所以从.page中删除它们

css：

.jump {
  display: none;
  background-color: #2f2f2f;
  transition: 2s all linear;
}

@-webkit-keyframes slideup {
  0% {
    bottom: -200px
  }
  100% {
    bottom: 0px
  }
}

.page {
  position: fixed;
  bottom: 0px;
  left: 75%;
  width: 80px;
  height: 25px;
font-size: 1rem;
  color: white;
  padding-top: 4px;
  margin-bottom: 0;
  text-align: center;
  background-color: black;
  border-radius: 10px 10px 0 0;
  z-index: 2;

}

.expand {
  bottom: 250px;
  position: fixed;
  transition: 0.2s all ease;
  -o-transition: 0.2s all ease;
  -webkit-transition: 0.2s all ease;
  z-index: 2;
  margin-bottom: 0px;
  cursor: pointer;
}

.reveal {
  position: fixed;
  width: 100%;
  height: 250px;
  float: left;
  background-color: black;
  overflow-x: auto;
  -ms-overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-y: hidden;
  white-space: nowrap;
  bottom: 0px;
  -webkit-animation: slideup 0.2s ease;
  animation: slideup 0.2s ease;
  -o-animation: slideup 0.2s ease;
  border-top: 1px solid black;
  display: inline-block;
  z-index: 3;
}

jsfiddle.net

【讨论】：