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

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 添加到元素时，将允许其向上滑动。

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

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

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