我试图将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/

10-12 03:12