Question

我有一个包含以下类的div：

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    overflow: auto;
}

.slider {
    overflow-y: hidden;
    max-height: 100vh;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

    &.close {
        max-height: 0;
    }
}

我希望div从页面底部向上滑动以适合整个屏幕。现在它从页面顶部滑动以适应整个屏幕。如何使用css / jquery完成这项工作？

当有人点击按钮时，我会从div中删除close类（我希望div从页面底部向上滑动到页面顶部）。如果他们要求关闭div（div应该从页面顶部滑动到页面底部并消失 - 高度= 0），我重新添加关闭按钮。

这是DIV：

<div class="overlay slider close"></div>

Answer 1

一种可能性是将顶部（从100％转换为0）以及高度或最大高度（从0到100％）转换。（vw和vh会好于％，但IE会像往常一样不愿意。）

.slider {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  overflow: hidden;
  transition: all 1s;
}

.slider.close {
  top: 100%;
  height: 0;
}

此处示范：

$('.trigger, .slider').click(function() {
  $('.slider').toggleClass('close');
});

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  background-color: #000; color: #FFF;
  transition: all 1s;
}

.slider.close {
  top: 100%;
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="trigger">
  Bring it
</button>
<div class="slider close">Leave it</div>

（你可以通过在“关闭”时隐藏滑块来省略'高度'动画，但这可能会在动画期间改变页面高度，导致滚动条移动。）

Answer 2

此css添加到元素后，将允许它向上滑动。

<style style="text/css">
div.slide-up {
  height:200px;
  overflow:hidden;
}
div.slide-up p {
  animation: 10s slide-up;
  margin-top:0%;
}

@keyframes slide-up {
  from {
    margin-top: 100%;
    height: 300%; 
  }

  to {
    margin-top: 0%;
    height: 100%;
  }
}
</style>

<div class="slide-up">
<p>Slide up... </p>
</div>

直接来自http://www.html.am/html-codes/marquees/css-slide-in-text.cfm

如何使用CSS从页面底部向上滑动div

2 个答案: