Drawer performance test

by Marco Abate

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="drawer-container bg-black">
  <div id="translate-3d-drawer" class="drawer bg-red"></div>
  <div id="left-drawer" class="drawer bg-yellow"></div> 
</div>
<button type="button" class="toggle">Toggle</button>

CSS

body {
  margin: 0;
}

.bg-black {
  background-color: black;
}

.bg-red {
  background-color: red;
}

.bg-yellow {
  background-color: yellow;
}

.drawer-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.drawer {
  display: flex;
  flex: 1;
  max-width: 80vw;
  transition: all 3s ease-in-out;
}

.toggle {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate3d(0,-50%,0);
}

#translate-3d-drawer {
  transform: translate3d(0,0,0);
}
#translate-3d-drawer.open {
  transform: translate3d(-700px,0,0);
}

#left-drawer {
  position: relative;
  left: 0;
}
#left-drawer.open {
  left: -700px;
}

JavaScript

var translateDrawer = $('#translate-3d-drawer');
var leftDrawer = $('#left-drawer');
var $body = $('body');

$(function() {
	onToggle();
})

var onToggle = $.fn.onToggle = function() {
	var onToggleClick = $body.on('click tap', '.toggle', function(e) {
  e.preventDefault();
  leftDrawer.toggleClass('open');
  translateDrawer.toggleClass('open');
  })
}