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

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用CSS从页面底部向上滑动div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div与以下类: @H_404_2@.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:

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

解决方法

一种可能性是将顶部(从100%转换为0)以及高度或最大高度(从0到100%)转换. (vw和vh会好于%,但是IE,像往常一样,不喜欢.) @H_404_2@.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/

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

猜你在找的JavaScript相关文章