如何獲得一個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

回答

相關問題