我有一个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>
解决方法
一种可能性是将顶部(从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;
- }
