Как сделать плавную анимацию c выезжающим блоком?

Question

[Fierfoxik]

Пытался реализовать анимацию появления блока с правой стороны, получилось почти то что я хотел.
Во первых анимация срабатывает только при 2 отображении элемента, во вторых анимация не срабатывает на скрытие элемента. Как это все исправить?

.visuallyhidden {
  transform: translate3d(100%, 0, 0);
  opacity: 1;
}

.js-module-hide {
  display: none;
  opacity: 0;
}

.modal-dark {
  background: rgba(0, 0, 0, .8);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.visuallyhidden {
  transform: translate3d(100%, 0, 0);
  opacity: 1;
}

.modal {
  height: 600px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform .3s ease-out;
}

function module () {
   var box = $('.modal-dark, .modal');
   var mod = $('.modal')
   if (box.hasClass('module-hide')) {
    box.removeClass('module-hide');
    setTimeout(function () {
      mod.removeClass('visuallyhidden');
    }, 600);
  } else {
    mod.addClass('visuallyhidden');
    box.one('transitionend', function(e) {
      box.addClass('module-hide');
    });
  }
};

Codepen

Answer 1

[Андрей Федоров]

Тут не нужен js
codepen.io/aliencash/pen/yJEZrB