Javascript 如何使用CSS让div从页面底部向上滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36316862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a div to slide up from the bottom of the page using CSS
提问by Brown A
I have a div with the following classes:
我有一个具有以下类的 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;
}
}
I want the div to slide up from the bottom of the page to fit the whole screen. Right now its sliding from the top of the page to fit the whole screen. How do I get that done using css/jquery?
我希望 div 从页面底部向上滑动以适合整个屏幕。现在它从页面顶部滑动以适合整个屏幕。我如何使用 css/jquery 完成这项工作？
When someone clicks a button, I remove the close class from the div (I want the div to slide up from the bottom of the page to the top of the page). If they ask to close the div (the div should slide from the top of the page to the bottom of the page and disappear - have height=0), I re-add the close button.
当有人单击按钮时，我从 div 中删除 close 类（我希望 div 从页面底部向上滑动到页面顶部）。如果他们要求关闭 div（div 应该从页面顶部滑动到页面底部并消失 - 高度=0），我重新添加关闭按钮。
Here's the DIV:
这是DIV：
<div class="overlay slider close"></div>
回答by Daniel Beck
One possibility is to transition both the top (from 100% to 0) and either the height or max-height (from 0 to 100%). (vwand vhwould be better than %, but IE, as usual, prefers not to.)
一种可能性是同时转换顶部（从 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;
}
Demonstration here:
演示在这里：
$('.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>(You could omit the 'height' animation by instead hiding the slider when it is "closed", but this would potentially change the page height during the animation causing the scrollbar to move around.)
（您可以通过在“关闭”时隐藏滑块来省略“高度”动画，但这可能会在动画期间更改页面高度，导致滚动条四处移动。）
回答by Michael
This css, when added to an element, will allow it to slide upwards.
这个 css，当添加到一个元素时，将允许它向上滑动。
<style style="text/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%;
}
}
</style>
<div class="slide-up">
<p>Slide up... </p>
</div>
Taken directly from http://www.html.am/html-codes/marquees/css-slide-in-text.cfm
直接取自http://www.html.am/html-codes/marquees/css-slide-in-text.cfm
