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

我有一个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：

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

演示在这里： https ： //jsfiddle.net/vnxy0j0L/2/

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

Answer 2

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

  
 
Slide up... 
  

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