Question

我试图在点击页面底部的按钮时显示一个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");
 }

Answer 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

过渡不适用于高度：0px

1 个答案: