0

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

<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");
 }
4

1 回答 1

0

当您 在下面的 div-webkit-animation:slideup 0.2s ease; animation: slideup 0.2s ease; -o-animation:slideup 0.2s ease;中的main <div>If 中使用 re-use 时，它​​会影响两次 = -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

于 2018-06-02T16:42:39.937 回答