如何获得一个div使用CSS

我有下面的类股利从页面底部向上滑动：如何获得一个div使用CSS

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

我想股利从页面底部向上滑动，以适应整个屏幕。现在它从页面顶部滑动到适合整个屏幕。我如何使用css/jquery完成这项工作？

当有人点击一个按钮，我从div中删除关闭类（我希望div从页面底部向上滑动到页面顶部）。如果他们要求关闭div（div应该从页面顶部滑到页面底部并消失 - 高度= 0），我重新添加关闭按钮。

这里的DIV：

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

来源

2016-03-30 Brown A

采取了小提琴将是有益的 – mhodges

你不觉得这是纯粹的CSS问题？如果你觉得这样，只需通过取出js和jquery来标记CSS即可。 – ameenulla0007

一种可能性是过渡既顶部（从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/

（您可以通过，而不是隐藏省略 '高度' 动画滑块时，它会“关闭”，但这会潜在地改变动画期间的页面高度，导致滚动条四处移动。）

来源

2016-03-30 18:56:21

在Internet Explorer中不起作用 –

这会教我尝试使用现代设备。切换到％而不是'vh'和'vw'似乎可以在IE中使用，我会编辑答案。 –

-1

此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>

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

来源

2016-03-30 18:57:16 Michael

如何获得一个div使用CSS

回答

相关问题