有没有人知道如何在不重新加载的情况下将图像转换到另一个页面。 http://nahelmoussi.com/ 上有一个很好的例子。
当您点击案例研究图片时，图片会变大并停留在页面上。
我知道你可以为动画使用 CSS 过渡，但我感到困惑的是你如何加载一个全新的页面（SEO 的不同页面）并使其看起来永远不会像重新加载一样？
【问题讨论】：
标签： javascript css user-interface transition fadein
history.pushState()DOM 窗口对象通过历史对象提供对浏览器历史记录的访问。它公开了有用的方法和属性，让您可以在用户历史记录中来回移动，以及 -- 从 HTML5 开始 -- 操作历史记录的内容 堆栈。
pushState()采用三个参数：一个状态对象、一个标题（当前被忽略）和（可选）一个 URL。
AJAX 代表异步 JavaScript 和 XML。简而言之，就是使用 XMLHttpRequest 对象与服务器进行通信。它可以发送和接收各种格式的信息，包括 JSON、XML、HTML 和文本文件。 AJAX 最吸引人的特点是它的“异步”特性，这意味着它可以与服务器通信、交换数据以及更新页面而无需刷新页面。
在对图像进行动画处理后，我们可以通过附加新位置来更新浏览器的历史记录，并使用 AJAX 来获取新内容。
操作history 允许用户以与以传统方式导航到新位置时相同的方式来回导航。
我们可以使用 AJAX 来获取新数据，并且可以选择更改部分或全部页面内容以显示这些新数据。
组合方法的效果是点击图片后：
history 已更新。虽然不是完全功能，但如果由localhost 提供服务，这将展示该过程的基本原理。这个问题的范围对于一个狭窄的演示来说太宽泛了，而一个足够宽的演示来展示全部功能则需要构建一个完整的演示网站。
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script async>
( function( W, D ) {
var handlePopstate = function( evt ) {
// handle history navigation through evt.state
console.log( evt.state );
},
getNewContentAndUpdateHistory = function( d, p ) {
// create and call ajax for new content using destination URL
console.log( d );
// update the browser's history and the history.state
history.pushState( { ps: p }, "", d );
// handle history navigation through history.state
console.log( history.state );
},
init = function() {
D.addEventListener( "click", function( evt ) {
var trg = evt.target;
if ( trg.tagName.toLowerCase() === "img" && !trg.classList.contains( "bg" ) ) {
var dest = trg.getAttribute( "data-href" ),
page = /(\d+)/.exec( dest )[ 1 ];
trg.classList.add( "bg", "_" + page );
// load, parse and display new content and update the browser's history
getNewContentAndUpdateHistory( dest, page );
}
}, false );
};
if ( /^(?:complet|interactiv)e$/.test( D.readyState ) ) {
init();
} else {
W.addEventListener( "DOMContentLoaded", init, false );
}
W.addEventListener( "popstate", handlePopstate, false );
} ( window, document ) );
</script>
<style>
html {
font-size: 10px;
}
body {
font-family: sans-serif;
font-size: 1.6rem;
margin: 0;
padding: 0;
}
img {
position: relative;
display: block;
width: 400px;
height: 200px;
cursor: pointer;
transition: width 1s, height 1s;
}
.bg {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
cursor: default;
}
._2 {
z-index: 2;
}
._3 {
z-index: 3;
}
._4 {
z-index: 4;
}
</style>
</head>
<body>
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/2/"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/3/"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/4/"></p>
</body>
</html>
【讨论】：
pushstate 内容仅跟踪正在查看的部分的更改。其他发生的一切都是动画；您只看到一个长“页面”，部分被指定为单独的“页面”。为了模仿它，如果你在专注于网页设计时忽略了pushstate 的东西，你可以简单地添加pushstate 的东西来更新浏览历史记录。