如何从一个网页顺利切换到另一个网页[关闭]
Posted
技术标签:
【中文标题】如何从一个网页顺利切换到另一个网页[关闭]【英文标题】：How to change from one web page to another smoothly [closed] 【发布时间】：2016-10-13 05:01:20 【问题描述】：我想知道当我们有例如 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?
)
【问题讨论】：
这不是“分享 sn-p”网站或代码编写服务。由您来研究基础知识应该如何工作，并在您的实际代码未按预期工作时返回。如果您已经尝试过，请在需要帮助时通过更新问题来分享该代码 【参考方案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>【讨论】：
谢谢你，我的朋友！这非常有帮助。我知道我们不应该只要求一个现成的代码，而是说实话，我不知道会发生什么！所以现在我我来看看代码！ :)以上是关于如何从一个网页顺利切换到另一个网页[关闭]的主要内容，如果未能解决你的问题，请参考以下文章