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

【问题标题】：How to get a div to slide up from the bottom of the page using CSS如何使用 CSS 让 div 从页面底部向上滑动
【发布时间】：2016-03-30 18:29:19
【问题描述】：

我有一个包含以下类的 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 应该从页面顶部滑到页面底部并消失 - height=0），我会重新添加关闭按钮。

这是 DIV：

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

【问题讨论】：

小提琴会很有帮助
你不认为这是纯粹的 CSS 问题吗？如果你觉得这样，只需通过取出 js 和 jquery 来标记 CSS。

标签： javascript jquery css

【解决方案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>

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

【讨论】：

这将教会我尝试花哨并使用现代单位。切换到 % 而不是 vh 和 vw 似乎在 IE 中有效，我将编辑答案。

【解决方案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

【讨论】：