title: How do slide bootstrap 4 modal dialog to right when closing using css or js
body: <p>I have a bootstrap modal which i apply css animation to slide in from right when opening, and it works nice but i will like to slide it back to right when custom close button is clicked instead of just hiding without animation. </p>
  
  <p>Please anyone have an idea of how i can do this, have searched online but all i see is how to apply animation on open.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function customOpen(element){
    $(element).modal({
      backdrop: false,
      keyboard: false
    });
  }
  function customClose(element){
    $(element).modal('hide');
  }
  $(document).on("click", "#open", function() {
    var elem = $(this).attr("data-element");
    customOpen(elem);
  });
  $(document).on("click", "#close", function() {
    var elem = $(this).attr("data-element");
    customClose(elem);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal.fade {
      transition: opacity .0s linear !important;
  }
  .modal.fade:not(.show).left .modal-dialog {
   -webkit-transform: translate3d(-125%, 0, 0);
   -ms-transform: translate3d(-125%, 0, 0);
   -o-transform: translate3d(-125%, 0, 0);
   transform: translate3d(-125%, 0, 0);
  }
  .modal.fade:not(.show).right .modal-dialog {
   -webkit-transform: translate3d(125%, 0, 0);
   -ms-transform: translate3d(125%, 0, 0);
   -o-transform: translate3d(125%, 0, 0);
   transform: translate3d(125%, 0, 0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div class="modal modal-full fade right" id="newPage"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" id="close" data-element='#newPage'&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;a class='btn btn-primary btn' id="open" data-element='#newPage'&gt;Open Right&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>