Edit in JSFiddle

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica', Arial, sans-serif;
}

.container {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 600px;
  overflow: hidden;
  position: relative;
}

.view {
  will-change: transform;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.list-view {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.details-view {
  transform: translateX(100%);

  box-sizing: border-box;
  padding: 30px;
}

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  box-sizing: border-box;
  line-height: 50px;
  padding: 0 30px;
  border-bottom: 1px solid #ccc;
  background: line-gradient(to bottom, #fff, #fafafa);
}

function onViewChange(evt) {
  container.classList.toggle('view-change');

  if (evt.currentTarget.classList.contains('list-item')) {
    itemName.textContent = evt.currentTarget.textContent;
  }
}

var container = document.querySelector('.container');
var itemName = document.querySelector('.item-name');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list li');
for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('click', onViewChange, false);
}
backButton.addEventListener('click', onViewChange);

  <div class="container">

    <div class="view list-view">
      <ul class="list">
        <li class="list-item">Item 1</li>
        <li class="list-item">Item 2</li>
        <li class="list-item">Item 3</li>
        <li class="list-item">Item 4</li>
      </ul>
    </div>

    <div class="view details-view">
      <h1>
        Details view for
        <span class="item-name"></span>
      </h1>
      <button class="back-button">Back</button>
    </div>
  </div>