jquery - Smoothstate.js 反向动画不起作用

Question

我尝试将 smoothState.js 嵌入到我的元素中，但出于任何原因，reverse/toogle/exiting 动画无法正常工作。我真的没有更多的想法，我找不到关于 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');
});

我真的希望有人能帮助我让这个东西工作:)

提前谢谢你。

Answer 1

来自 Github:

There is few things for anyone to pay attention, such as following:

• the onEnd on the demo is deprecated, change it to onReady/onAfter (this solve one problem)
• don't try it on local development, upload it to server and try it instead. _ somehow put the file before closing is better instead of on the top (head area).

Read Source.