我使用smoothState.js最基本的使用html和css工作正常
;(function ($) {
$('#main').smoothState();
})(jQuery);
但是,即使使用此基本实现,如果您选择当前页面的链接(即重新加载页面),您将获得一个空白的白色屏幕,其左上角写有2015.有了这个错误,控制台中没有记录错误,这让我认为这是一个由smoothState.js处理的错误
如果我扩展smoothState以允许更高级的选项(即’is-exiting’),现在无法浏览网站,离开页面.
使用高级实现,在这个问题的最后显示我得到控制台错误：
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：
这是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,pageCacheSize等…并根据您正在加载/退出的页面实现不同的转换.然而,在我解决上述问题之前,我们认为没有值得继续前进.
任何想法或帮助都是受欢迎的,非常感谢,谢谢.
哦,我也遇到了这个错误
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
我处理了同样的问题.如果您下载演示版并通过他们的’functions.js’,您将会注意到处理现有css类的不同方式.这是代码,测试了它,它适用于我.
$(function(){
'use strict';
var $page = $('#main'),options = {
debug: true,prefetch: true,cacheLength: 2,forms: 'form',onStart: {
duration: 250,// Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},onReady: {
duration: 0,render: function ($container,$newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},smoothState = $page.smoothState(options).data('smoothState');
});
