我试图将smoothState.js嵌入到我的项目中,但是由于任何原因,反向/切换/退出动画均不起作用。
我真的没有更多的主意,也找不到关于stackoverflow或其他问题的解决方案。
我的代码:
HTML:
<div id="main" class="m-scene">
<!-- Classes that define elment animations -->
<a href="index.html">Home</a>
<a href="about.html">About</a>
<div class="scene_element scene_element--fadeinright">
<p>Home to the boy</p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.smoothState.js"></script>
<script src="js/functions.js"></script>
CSS :(链接到css文件,包含在smoothstate软件包中)
JS:
$(function(){
'use strict';
var $page = $('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
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');
});
我真的希望有人可以帮助我使这个事情正常工作:)
先感谢您。
最佳答案
从Github:
几乎没有人需要注意的事情,例如:
演示中的onEnd已过时,将其更改为onReady / onAfter(这解决了一个问题)
不要在本地开发中尝试它,而是将其上传到服务器并尝试。 _以某种方式将文件放在关闭之前比较好
而不是在顶部(头部区域)。
Read Source.
关于jquery - Smoothstate.js反向动画不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30984653/