Question

我尝试将smoothState.js嵌入到我的项目中，但出于任何原因，反向/ toogle /退出动画将无效。我真的没有更多的想法，我找不到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：

很少有人可以关注，例如：


不推荐使用该演示中的onEnd，将其更改为onReady / onAfter（这解决了一个问题）

不要在本地开发上尝试，将其上传到服务器并尝试使用它。 _以某种方式将文件放在关闭前更好   而不是在顶部（头部区域）。

Read Source.

Answer 2

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

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

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

Answer 3

我发现当我遇到这个问题时，时间已经过去了。也许您的动画持续时间实际上超过了您在发布的JS中设置的250毫秒。尝试将其增加到1000.另外：您是否有一个名为is-exiting的课程，带有您的动画？如果没有，可能会更改is-exiting到scene_element - fadeinright并调整JS中的持续时间以相应地与CSS重合。最好的。

Smoothstate.js反向动画无法正常工作

3 个答案: