I have a page transition I'm trying to work into my site. I have 2 50% height, 100% width elements, one placed before and after the body (with pseudo-selectors). I would like the 2 elements to slide to the middle of the screen, covering the background content. The transition is triggered when the "is-changing" class is added to the body, via Javascript.

```js
document.getElementById("btn").addEventListener("click", fakeReq);

function fakeReq() {
  let body = document.body;
  body.classList.add("is-changing");
  console.log("class added");
  setTimeout(function() {
    body.classList.remove("is-changing");
    console.log("class removed");
  }, 5000);
}
```

```css
body {
  height: 100vh; 
  width: 100%;
  background-color: grey; 
}

main {
  display: flex;
  height: 100%; 
  justify-content: center; 
  align-items: center; 
}

body::after, body::before {
 height: 50vh; 
 width: 100%; 
 position: fixed; 
 left: 0; 
 background-color: blue; 
 z-index: 10; 

}

body::before {
 top: 0; 
 transform: translateY(-100%); 
}

body::after {
 bottom: 0; 
 transform: translateY(100%);
}

body.is-changing::after, body.is-changing::before {
 transform: translateY(0); 
}

.loading-bar {
 position: fixed; 
 height: 2px; 
 width: 90%; 
}

.loading-bar::before {
 position: absolute; 
 background-color: aqua; 
 left: 0; 
 top: 0; 
 height: 100%; 
 width: 100%; 
 transform: scaleX(0);
 transform-origin: left center; 
}

.is-changing .loading-bar::before {
 transform: scaleX(1);
}
```

```html
<body>
  <main>
    <div class="index main-content">
      <h1>Home Page</h1>
      <button id="btn">html request</button>
    </div>
  </main>
</body>
```