<section class="view" data-view-initial id="view-1">
  <div class="view__inner">
    <a data-to-view="#view-2">Go to view 2</a>
  </div>
</section>
<section class="view" id="view-2">
  <div class="view__inner">
    <a data-to-view="#view-3">Go to view 3</a>
  </div>
</section>
<section class="view" id="view-3">
  <div class="view__inner">
    <a data-to-view="#view-1">Go to view 1</a>
  </div>
</section>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 900 48px 'Work Sans';
  background-color: #212121;
}

a {
  color: white;
  text-decoration: underline;
  cursor: pointer;
}

.view {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 1200px;
  
  display: none;
  
  &.view--block {
    display: block;
  }
  
  &.view--visible .view__inner {
    transform: rotate(0deg) !important;
    opacity: 1 !important;
  }
  
  &.view--up .view__inner {
    transform: rotateX(-90deg);
    transform-origin: 50% 0%;
    opacity: 0;
  }
  
  &.view--down .view__inner {
    transform: rotateX(90deg);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  
  &:nth-child(2n) .view__inner {
    background-color: #45B8E2;
  }
  &:nth-child(3n) .view__inner {
    background-color: #ED6464;
  }
  &:nth-child(4n) .view__inner {
    background-color: #AC92EC;
  }
}

.view__inner {
  position: relative;
  width: 100%;
  height: 100%;
  
  text-align: center;
  line-height: 100vh;
  
  color: white;
  background-color: #2BD996;
  
  transition: opacity .6s ease;
  transition-property: opacity, transform;
}

var nav = {
  
  init: function(){
    this._bindEvents();
    this._openInitView();
  },
  
  _openInitView: function(){
    //open intial view
    var el = document.querySelector('[data-view-initial]');
    el.classList.add('view--block');
    el.classList.add('view--visible');
  },
  
  _bindEvents: function(){
    var self = this,
        triggers = document.querySelectorAll('[data-to-view]');
    
    //add click event listeners
    //to all view triggers
    [].forEach.call(triggers, function(el){
      el.addEventListener('click', function(){
        var selector = this.getAttribute('data-to-view');
        self._toView(selector);
      }, false);
    });
  },
  
  _toView: function(elSelector){
    var newViewEl = document.querySelector(elSelector),
        currOpenViewEl = document.querySelector('.view--visible'),
        self = this;
    
    //check if new view is the
    //view that is currently open
    if(newViewEl === currOpenViewEl) return;
    
    //close currently open view
    this._closeView(currOpenViewEl, function(done){
      //open new view
      //pass close view done method as callback
      self._openView(newViewEl, done);
    });
  },
  
  _closeView: function(el, callback){
    //move the view to the "up" position
    el.classList.add('view--up');
    el.classList.remove('view--visible');
    
    //trigger the callback x sec into the animation
    setTimeout(function(){
      callback(function(){
        el.classList.remove('view--block');
        el.classList.remove('view--up');
      });
    }, 100);
  },
  
  _openView: function(el, callback){
    //display block the view so its loaded
    //and move the view to the "down" position
    el.classList.add('view--block');
    el.classList.add('view--down');
    
    setTimeout(function(){
      //when the classes are added
      //start the animation by adding the
      //visible class and pulling the view up
      el.classList.add('view--visible');
      
      setTimeout(function(){
        //animation is done
        el.classList.remove('view--down');
        callback();
      }, 600);  
    }, 50);
  }
  
};

nav.init();