Smoothstate.js反向动画不起作用

Question

我试图将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文件，包含在平滑状态包中)

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：

几乎没有人需要注意的事情，比如：

• 演示中的onEnd已弃用，请将其更改为onReady/onAfter (这解决了一个问题)
• 不要在本地开发上尝试，请将其上传到服务器并尝试。以某种方式在关闭之前放置文件比放在顶部(标题区域)更好。

Read Source.

Answer 2

尝试从onReady渲染函数中删除$container.removeClass('is-exiting');，并将其附加到您的选项中：

onAfter: function($container) { $container.removeClass('is-exiting'); }

一旦所有内容都加载到页面中，就会调用onAfter函数，并且在协调动画时似乎很有帮助。

Answer 3

当我遇到这个问题时，我发现时机不对。也许你的动画的持续时间实际上比你在JS中设置的250ms要长。尝试将其增加到1000。还有:你有没有一个叫做is-exiting的类和你的动画？如果没有，可以将is- with更改为scene_element--fadeinright，并相应地调整JS中的持续时间以与CSS保持一致。最好的。