Modal Animation

Modal Animation

by Nirvanachain

HTML

<!-- Helpful Link:
https://google-developers.appspot.com/web/fundamentals/resources/samples/look-and-feel/animations/modal-view-animation
-->
<header>
	    <button class="dont-press-me-button">Don't press me.</button>
	  </header>

		<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>
	        <li class="list-item">Item 5</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>

	  <div class="modal-view-container">
	    <div class="modal view">
	      <div class="modal-view-details">
	        <h1>Oh no!</h1>
	        <p>You pressed the button! Well that's gone and torn it, hasn't it?</p>
	        <button>Sorry</button>
	      </div>
	    </div>
	  </div>

CSS

header {
			  height: 50px;
			  background: #3C78D8;
			  z-index: 1;
			  top: 0;
			  left: 0;
			  width: 100%;
			  max-width: 400px;
			  line-height: 50px;
			  text-align: right;

			  position: fixed;
			  will-change: transform;
			}

			.dont-press-me-button {
			  background: #FFF;
			  border: none;
			  color: #333;
			  font-size: 13px;
			  padding: 6px 10px;
			  border-radius: 2px;
			  margin-right: 10px;
			}

			.container,
			.modal-view-container {
			  width: 100%;
			  height: 100%;
			  max-width: 400px;
			  max-height: 600px;
			  overflow: hidden;
			  position: relative;
			  padding-top: 50px;
			  box-sizing: border-box;
			  z-index: 10;
			  pointer-events: none;
			}

			.modal-view-container {
			  position: fixed;
			  top: 0;
			  left: 0;
			}

			.view.modal {
			  position: fixed;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  z-index: 2;
			  max-width: 400px;
			  max-height: 600px;

			  -webkit-transform: scale(1.15);
			  transform: scale(1.15);

			  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
			    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
			  transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
			    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

			  pointer-events: none;
			  opacity: 0;
			  will-change: transform, opacity;

			}

			.view.modal.visible {
			  pointer-events: auto;
			  opacity: 1;
			  -webkit-transform: scale(1);
			  transform: scale(1);

			  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
			    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
			  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
			    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
			}

			.modal-view-details {
			  background: #FFF;
			  z-index: 2;
			  position: fixed;
			  left: 50%;
			  top: 50%;
			  padding: 25px 25px 50px 25px;
			  width:...

JavaScript

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

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

			function onDontPressPress(evt) {
			  modal.classList.add('visible');
			}

			function onModalDismissPress(evt) {
			  modal.classList.remove('visible');
			}

			var modal = document.querySelector('.modal');
			var modalDismissButton = modal.querySelector('button');

			var container = document.querySelector('.container');
			var itemName = document.querySelector('.item-name');
			var backButton = document.querySelector('.back-button');
			var dontPressMeButton = document.querySelector('.dont-press-me-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);
			dontPressMeButton.addEventListener('click', onDontPressPress);
			modalDismissButton.addEventListener('click', onModalDismissPress);