<main class="main">
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="box">Section 1</div>
  </section>
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="box">Section 2</div>
  </section>
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="box">Section 3</div>
  </section>
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="box">Section 4</div>
  </section>
</main>

<a href="https://github.com/marcelo-ribeiro/Fullscreen-Layout-Page-Transitions-Pure-JS-CSS" target="_blank" style="display: block;">
  <img style="position: fixed; bottom: 0; right: 0; z-index: 110; width: 4rem; height: auto; display: block;" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="github-logo">
</a>

// ==================================
// Fullscreen Layout Page Transitions
// ==================================

// Variables
// =========
$section-class: "section";
$section-expanded-class: "is-expanded";
$section-has-expanded-class: "has-expanded-item";
$section-transition-duration: 0.6s;
$section-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
$section-colors: #f06060, #fa987d, #72cca7, #10a296;

// Component Styles
// ================
.#{$section-class} {
  position: absolute;
  z-index: 0;
  width: 50%;
  height: 50%;
  overflow: hidden;
  cursor: pointer;
  transform: scale3d(1, 1, 1);
  will-change: transform, opacity, contents;
  transition-duration: $section-transition-duration;
  transition-timing-function: $section-transition-timing-function;

  &:nth-child(1) {
    top: 0;
    left: 0;
    background: nth($section-colors, 1);
  }

  &:nth-child(2) {
    top: 0;
    left: 50%;
    background: nth($section-colors, 2);
  }

  &:nth-child(3) {
    top: 50%;
    left: 0;
    background: nth($section-colors, 3);
  }

  &:nth-child(4) {
    top: 50%;
    left: 50%;
    background: nth($section-colors, 4);
  }

  &.#{$section-expanded-class} {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    cursor: auto;
  }

  .#{$section-has-expanded-class} &:not(.#{$section-expanded-class}) {
    transform: scale3d(0, 0, 0);
    opacity: 0;
  }
}

.close-section {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  color: #fff;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 0.1s linear;
  will-change: opacity;

  .#{$section-class}.#{$section-expanded-class} & {
    opacity: 1;
    pointer-events: auto;
    transition-duration: 0.2s;
    transition-delay: $section-transition-duration;
  }
}

// ==============
// Example Styles
// ==============
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font: 16px/1.5 "Roboto Slab", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  background: #000;
}
.box {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 2.5rem;
  font-weight: 500;
  color: #fff;
}

const Boxlayout = (() => {
  const wrapper = document.body,
    sections = [...document.querySelectorAll(".section")],
    closeButtons = [...document.querySelectorAll(".close-section")],
    expandedClass = "is-expanded",
    hasExpandedClass = "has-expanded-item";

  const initEvents = () => {
    sections.forEach((element) => {
      element.addEventListener("click", () => openSection(element));
    });
    closeButtons.forEach((element) => {
      element.addEventListener("click", (event) => {
        event.stopPropagation();
        closeSection(element.parentElement);
      });
    });
  };

  const openSection = (element) => {
    if (element.classList.contains(expandedClass)) return;
    element.classList.add(expandedClass);
    wrapper.classList.add(hasExpandedClass);
  };

  const closeSection = (element) => {
    if (!element.classList.contains(expandedClass)) return;
    element.classList.remove(expandedClass);
    wrapper.classList.remove(hasExpandedClass);
  };

  return { init: initEvents };
})();

Boxlayout.init();