Slide Up Transition

Question

I'm working on trying to get a div to slide up from the bottom. So far it works ok as I can get the div to show and hide when I need to by adding a class of open-drawer to the element that I'm trying to get to slide up. But I'm not sure how I can get it to animate and slide up from the bottom.

Not sure if I need to adjust something within the transition or what.

Here's what I got so far:

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

Link to demo (CodePen): https://codepen.io/ultraloveninja/pen/qzVQLp

Answer 1

Three examples: jQuery, pure JS, and pure HTML+CSS

Toggle animate panel using jQuery and .toggleClass()

• Use transform: translateY at 100% and on click the class .is-open will animate to 0.
• No need for extra special classes, use what you already have, a data-* attribute: data-drawer="#drawer-01" (notice the ID # selector!)
• Also, make sure to use id="drawer-01" as the drawer selector.
• Use jQuery's .toggleClass()

Animating transform is always a better idea than animating non-accelerable properties like top, bottom etc etc

$("[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>

Toggle animate panel in pure JavaScript and .classList.toggle()

If you don't want to use jQuery only because of such a simple task, here's in 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>

Toggle animate panel in pure HTML + CSS and a hidden checkbox

Need support for no-JS environment? Here you go

.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

If you're able to give the .drawer a fixed height, then you can change the bottom property to initially be negative that amount.

Be sure to also add the opacity to the transition, otherwise it will instantly hide instead of fading out gently.

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