javascript ajax css-transitions es6-promise server-response

How to change from one web page to another smoothly

I would like to know when we have for example 2 pages and want to change from one page to another, can we retrieve the website using Asynchronous Javascript and apply the transitions before the response is received from the server?

Ill try to demonstrate here what I mean. Hope it helps

page1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Page 1</title>
</head>
<body>
    <h1>Page 1</h1>
    <button onclick="changePage();">Change to page 2</button>
</body>
</html>

script.js

const url = "myWebsite.com/page2";
changePage = () => {
    fetch(url)
    .then(
        (response) => {
            if(response.ok) {
                // NOW WHAT?
            }
        }
    )
}

Solution

You may use the CSS @keyframes to define an animation and then using the animationend event you may change to another page:

window.onload = function () {
  var view_port = document.getElementsByClassName('view_port')[0];
  var element = document.getElementById("logoutAnimation");
  
  // listen on animationend
  element.addEventListener("animationend", function () {
    // remove animation elements
    view_port.style.visibility =  'hidden';
    
    // do logout.....
    window.location = "https://github.com/"
  }, false);
  
  // hide animation element on start up
  view_port.style.visibility =  'hidden';
  document.getElementById('startAnimation').addEventListener('click', function(e) {
    
    view_port.style.visibility =  'visible';
    
    // start animation
    element.className  += 'cylon_eye';
  }, false);
}

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  color: white;
  height: 100%;
  width: 20%;
  -webkit-animation: 2s linear 0s 2 alternate move_eye;
  -moz-animation: 2s linear 0s 2 alternate move_eye;
  -o-animation: 2s linear 0s 2 alternate move_eye;
  animation: 2s linear 0s 2 alternate move_eye;
}

@-webkit-keyframes move_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

@-moz-keyframes move_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

@-o-keyframes move_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

@keyframes move_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

<div class="view_port">
    <div class="polling_message">
        Logging out....
    </div>
    <div id="logoutAnimation"></div>
</div>
<button id="startAnimation">Start Animation and Logout</button>