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