smoothState.js是允许你实现真正简洁的站点页面转换。为了实现这样站点效果,我们需要通过smoothState处理处理一些问题:
-更新你的用户与popState的URL
-从您的服务器通过AJAX获取内容
-页面上的内容替换为新的内容
最基本方法
为了实现这一系统的功能,您可以运行:
$('#body').smoothState();
这行代码将导致我们的网页链接的任何内部#body容器的内容无需重新加载页面。
添加页面转换
在传统动画,场景的变化需要抽出一组帧,得到连续快速地交换出去。同样,smoothState允许您定义一个数组的函数,返回页面被换出的标记。这很有用,因为它允许您添加所需的HTML框架实现CSS动画。这里有一个基本的例子,一个简单的褪色效果:
Javascript:
$('#body').smoothState({ renderFrame: [ // Frame 1: sets up scaffolding needed for CSS animations function ($content, $container) { var currentHTML = $container.html(), newHTML = $('<div/>').append($content).html(), html = [ '<div class=\'content\' style=\'height:' + $container.height() + 'px;\'>', '<div class=\'page page--old\'>' + currentHTML + '</div>', '<div class=\'page page--new\'>' + newHTML + '</div>', '</div>' ].join(''); return html; }, // Frame 2: cleans up extra markup added for CSS animations function ($content) { return $('<div/>').append($content).html(); } ] });
CSS:
/* Page transitions - simple fade effect ------------------------------------------------- */ #body .content { position: relative; z-index: 1; } #body .page { position: absolute; top: 0; left: 0; width: 100%; } #body .page--old { animation: fadeOut 0.1s ease; /* Don't forget to add vendor prefixes! */ opacity: 0; z-index: 1; } #body .page--new { visibility: visible; animation: fadeIn 0.4s ease; z-index: 2; } /* Animations classes ------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 2; } }
你可以看到这个简单的演示,会影响自己的网站