我有html and css最基本的使用工作正常smoothState.js
;(function ($) {
$('#main').smoothState();
})(jQuery);
然而，即使有了这个基本的实现，如果您选择当前页面的链接，（即重新加载页面）你会得到一个空白white屏幕与2015写在左上角。有这个错误控制台中没有记录错误这让我认为这是由smoothState.js
如果我扩展 smoothState 以允许更高级的选项，（即“正在退出”）现在无法浏览网站，无法离开页面。
通过高级实现，如本问题末尾所示，我收到控制台错误：
Uncaught TypeError: content.toggleAnimationClass is not a function main.js:134
$.smoothState.onStart.render @ main.js:134
load @ jquery.smoothState.js:533
clickAnchor @ jquery.smoothState.js:589
n.event.dispatch @ jquery.min.js:3
n.event.add.r.handle @ jquery.min.js:3
这是html:
<head></head>
<body>
<div id="main" class="m-scene">
<header id="header">
</header>
<div id="page_content_container" class="scene_element scene_element--moveUpIn">
<section class="about-intro-container">
</section>
<section class="about-services-container">
</section>
<section class="about-randomBits-container">
</section>
<footer>
</footer>
</div><!-- #page_content_container -->
</div><!-- #main -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.smoothState.js"></script>
<script src="js/main.js"></script>
</body>
</html>
这是与 smoothState 相关的css:
/* prefixes are just missing here, I have them in my file */
.m-scene .scene_element {
animation-duration: .5s;
transition-timing-function: ease-in;
animation-fill-mode: both;
}
.m-scene .scene_element--moveUpIn {
animation-name: moveUp, fadeIn;
}
.m-scene.is-exiting .scene_element {
animation-direction: alternate-reverse;
}
@keyframes moveUp {
0% {
transform: translateY(100%)
}
100% {
transform: translateY(0%)
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
这是更高级的 smoothState：
;(function($) {
'use strict';
var $body = $('html, body'),
content = $('#main').smoothState({
// Runs when a link has been activated
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
// toggleAnimationClass() is a public method
// for restarting css animations with a class
content.toggleAnimationClass('is-exiting');
// Scroll user to the top
$body.animate({
scrollTop: 0
});
}
}
}).data('smoothState');
//.data('smoothState') makes public methods available
})(jQuery);
最终我计划添加prefetch, 页面缓存大小等等...并根据您正在加载/退出的页面实现不同的转换。然而，目前在我能够解决上述问题之前，不值得继续前进。
欢迎任何想法或帮助，非常感谢，Thanks.
哦，我也刚刚收到这个错误
XMLHttpRequest cannot load file:///Users/Parallelos/Developer/paralellos.github.io/projects.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
n.ajaxTransport.k.cors.a.crossDomain.send @ jquery.min.js:4
n.extend.ajax @ jquery.min.js:4
fetch @ jquery.smoothState.js:355
load @ jquery.smoothState.js:529
clickAnchor @ jquery.smoothState.js:589
n.event.dispatch @ jquery.min.js:3
n.event.add.r.handle @ jquery.min.js:3
