☰

CSS を使用して div をページの下部からスライドさせる方法 質問する

tag-icon • tag-icon javascript jquery css
CSS を使用して div をページの下部からスライドさせる方法 質問する

次のクラスを持つ 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 はページの上部から下部にスライドして消えます - height=0 にします)、閉じるボタンを再度追加します。

DIVは次のとおりです:

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

ベストアンサー1

1 つの可能性は、top (100% から 0) と height または max-height (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;
}

デモンストレーションはこちら:

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

(スライダーが「閉じている」ときにスライダーを非表示にすることで、「高さ」アニメーションを省略することもできますが、これによりアニメーション中にページの高さが変更され、スクロールバーが移動してしまう可能性があります。)

おすすめ記事