向上滑动过渡

Question

我正在努力使div从底部向上滑动。到目前为止，一切正常，因为我可以在需要滑动的元素上添加一个open-drawer类，以便在需要时显示和隐藏div。但是我不确定如何使它动画并从底部向上滑动。

不确定是否需要在transition或其他范围内进行调整。

这是我到目前为止所得到的：

$(".drawer-link").click(function(e) {
  var vdata = $(this).data("id");
  $(".drawer[data-id=" + vdata + "]").addClass("open-drawer");
  e.preventDefault();
});

$(".close").on("click", function(e) {
  $(".drawer").removeClass("open-drawer");
  e.preventDefault();
});

body {
  padding: 20px;
}

.drawer {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  background: #0c1f3f;
  padding-top: 90px;
  overflow-y: scroll;
  transition: top 0.5s ease;
  color: white;
  opacity: 0;
}

.wrapper {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.open-drawer {
  top: 150px;
  opacity: 1;
}

.close {
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a class="drawer-link" href="#" data-id="drawer-01">Link To Show Drawer</a>
</div>

<div class="drawer" data-id="drawer-01">
  <div class="wrapper">
    <h3>Test</h3>
    <p>This is the drawer</p>
    <a class="close" href="#">Close The Drawer</a>
  </div>
</div>

演示链接（CodePen）：https://codepen.io/ultraloveninja/pen/qzVQLp

Answer 1

三个示例： jQuery ，纯 JS 和纯 HTML + CSS

使用jQuery和.toggleClass()

切换动画面板

• 使用transform: translateY的比例为100％，然后单击类.is-open将动画为0 。
• 不需要额外的特殊类，只需使用data-* 属性：data-drawer="#drawer-01"（请注意ID #选择器！）
• 此外，请确保使用id="drawer-01"作为抽屉式选择器。
• 使用jQuery's .toggleClass()

动画transform总是比动画top，bottom等不可加速的属性更好的主意

$("[data-drawer]").on('click', function(e) {
  e.preventDefault();
  $($(this).data("drawer")).toggleClass("is-open");
});

.drawer {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #0c1f3f;
  overflow-y: scroll;
  color: white;
  
  /* Initial transforms */
  opacity: 0;
  transform: translateY(100%);
  transition: 0.5s ease;
}

.drawer.is-open {
  opacity: 1;
  transform: translateY(0);
}

<div>
  <a href="#!" data-drawer="#drawer-01">Link To Show Drawer</a>
</div>

<div class="drawer" id="drawer-01">
  <div class="wrapper">
    <h3>Test</h3>
    <p>This is the drawer</p>
    <a data-drawer="#drawer-01" href="#!">Close The Drawer</a>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用纯JavaScript和.classList.toggle()

切换动画面板

如果您不仅仅因为这样简单的任务就想使用jQuery，请在 vanilla JavaScript中找到

const toggleDrawer = (evt) => {
  evt.preventDefault();
  document.querySelector(evt.target.getAttribute('data-drawer')).classList.toggle('is-open');
}

document.querySelectorAll('[data-drawer]').forEach(btn => btn.addEventListener('click', toggleDrawer));

.drawer {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #0c1f3f;
  overflow-y: scroll;
  color: white;
  
  /* Initial transforms */
  opacity: 0;
  transform: translateY(100%);
  transition: 0.5s ease;
}

.drawer.is-open {
  opacity: 1;
  transform: translateY(0);
}

<a href="#!" data-drawer="#drawer-01">Link To Show Drawer</a>

<div class="drawer" id="drawer-01">
  <div class="wrapper">
    <h3>Test</h3>
    <p>This is the drawer</p>
    <a data-drawer="#drawer-01" href="#!">Close The Drawer</a>
  </div>
</div>

以纯HTML + CSS和隐藏的复选框切换动画面板

需要对非JS环境的支持吗？在这里

.drawer-button {color: blue; cursor: pointer;}

.drawer {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #0c1f3f;
  overflow-y: scroll;
  color: white;
  
  /* Initial transforms */
  opacity: 0;
  transform: translateY(100%);
  transition: 0.5s ease;
}

.drawer-toggler:checked+.drawer {
  opacity: 1;
  transform: translateY(0);
}

<label class="drawer-button" for="drawer-01">SHOW DRAWER</label>

<div>Other HTML here...</div>

<input id="drawer-01" class="drawer-toggler" type="checkbox" hidden>
<div class="drawer">
  <div class="wrapper">
    <h3>Test</h3>
    <p>This is the drawer</p>
    <label class="drawer-button" for="drawer-01">CLOSE DRAWER</label>
  </div>
</div>

Answer 2

如果您可以将.drawer的高度设置为固定高度，则可以将bottom属性更改为最初为负值。

请确保还将不透明度添加到过渡中，否则它将立即隐藏而不是逐渐淡出。

$(".drawer-link").click(function(e) {
  var vdata = $(this).data("id");
  $(".drawer[data-id=" + vdata + "]").addClass("open-drawer");
  e.preventDefault();
});

$(".close").on("click", function(e) {
  $(".drawer").toggleClass("open-drawer");
  e.preventDefault();
});

body {
  padding: 20px;
}

.drawer {
  position: fixed;
  height: 150px;
  bottom: -150px;
  width: 100%;
  left: 0;
  background: #0c1f3f;
  padding-top: 90px;
  overflow-y: scroll;
  transition: bottom 0.5s ease, opacity 0.5s ease;
  color: white;
  opacity: 0;
}

.wrapper {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.open-drawer {
  bottom: 0px;
  opacity: 1;
}

.close {
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a class="drawer-link" href="#" data-id="drawer-01">Link To Show Drawer</a>
</div>

<div class="drawer" data-id="drawer-01">
  <div class="wrapper">
    <h3>Test</h3>
    <p>This is the drawer</p>
    <a class="close" href="#">Close The Drawer</a>
  </div>
</div>