Question

我想知道当我们有2个页面并且想要从一个页面更改为另一个页面时，我们是否可以使用异步Javascript检索网站并在从服务器收到响应之前应用转换？

我试着在这里展示我的意思。希望它有所帮助

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

Answer 1

您可以使用CSS @keyframes定义动画，然后使用animationend event更改为其他页面：

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>

如何顺畅地从一个网页更改为另一个网页

1 个答案: