How to change from one web page to another smoothly

Question

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?
            }
        }
    )
}

This isn't a "share a snippet" site or a code writing service. It's up to you to research how the basics should work and come back when you have actual code that isn't working as expected. If you have already tried then share that code by updating question if you want help — charlietfl, Jun 12 '16 at 20:20

score 0 · Accepted Answer · answered Jun 12 '16 at 20:44

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>

thank you my friend!It was very helpfull.I know we are not suppose to only ask for a ready code but to tell you the truth i dont have any idea how that might happed!So now i ll take a look at the code! :) — Evangelos, Jun 12 '16 at 20:59

How to change from one web page to another smoothly

1 Answers1