Changing bottom and top values in a CSS transition on click

Question

I have a div with a fixed position that is supposed to slide up/down on click. I'm trying to get this to work with a smooth CSS transition but it only jumps up/down when clicked. I'm probably missing something obvious here but can't figure out what.

Any ideas?

I've created a demo here.

My CSS:

  .wrapper {
      position: fixed;
      bottom: 30px;
      top: initial;
      background: green;
      width: 100%;
      height: 20px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
  }
  .wrapper.slide-up {
      top: 0px;
      bottom: initial;
  }
  .wrapper.slide-down {
      top: auto;
      bottom: 36px;
  }

My JS:

  var wrapper = $('.wrapper');

  $(wrapper).click(

  function () {
      if (wrapper.hasClass('slide-up')) {
          wrapper.addClass('slide-down').removeClass('slide-up');
      } else {
          wrapper.removeClass('slide-down').addClass('slide-up');
      }
  });

Answer 1

You can't use top and bottom interchangeably. You need to have one style you need to change.

For example:

.wrapper.slide-up {
  top: 0px;
}
.wrapper.slide-down {
   top: calc(100% - 36px);
}

JSFiddle

You can use the calc css function to work out exactly what you need.

top: calc(100% - 36px);

But you need to make sure that when you're doing transitions, you keep it to one element that you need to change. So top will give it the animation when you have two different top values, but when you introduce bottom when it's not set, it will just 'jump'.

Be careful when using calc() as it isn't fully supported in older browsers:

Can I use - Calc()