如何使用CSS使div从页面底部向上滑动

问题描述

我有一个具有以下课程的div:

I have a div with the following classes:

.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完成该操作?

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中删除了关闭类(我希望div从页面底部向上滑动到页面顶部).如果他们要求关闭div(div应该从页面顶部滑动到页面底部并消失-高度= 0)，则我重新添加关闭按钮.

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:

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

推荐答案

一种可能性是同时转换顶部(从100％到0)以及高度或最大高度(从0到100％). (vw和vh会比％更好，但IE像往常一样不愿意这样做.)

One possibility is to transition both the top (from 100% to 0) and either the height or max-height (from 0 to 100%). (vw and vh would be better than %, but IE, as usual, prefers not to.)

.slider {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  overflow: hidden;
  transition: all 1s;
}

.slider.close {
  top: 100%;
  height: 0;
}

此处的演示:

$('.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.)

这篇关于如何使用CSS使div从页面底部向上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！