Question

html 和 css 正常运行 smoothState.js

;(function ($) {
 $('#main').smoothState();
})(jQuery);

然而，即使使用此基本实现，如果您选择当前页面的链接（即重新加载页面），您将获得带有白色屏幕> 2015 写在左上角。出现此错误时， 控制台中未记录任何错误 ，这让我觉得它是由 smoothState.js

如果我展开smoothState以允许更高级的选项，（即＆＃39;正在退出＆＃39;）现在无法浏览网站，移出页面

使用高级实现，如本问题末尾所示，我收到控制台错误：

Uncaught TypeError: content.toggleAnimationClass is not a function main.js:134
    $.smoothState.onStart.render @ main.js:134
    load                         @ jquery.smoothState.js:533
    clickAnchor                  @ jquery.smoothState.js:589
    n.event.dispatch             @ jquery.min.js:3
    n.event.add.r.handle         @ jquery.min.js:3

这里是 html ：

<head></head>
<body>
 <div id="main" class="m-scene">

  <header id="header">
  </header>

  <div id="page_content_container" class="scene_element scene_element--moveUpIn">

   <section class="about-intro-container">
   </section>

   <section class="about-services-container">
   </section>

   <section class="about-randomBits-container">
   </section>

   <footer>
   </footer>

  </div><!-- #page_content_container -->
 </div><!-- #main -->

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="js/jquery.smoothState.js"></script>
 <script src="js/main.js"></script>

</body>
</html>

这里是smoothState相关的 css ：

/* prefixes are just missing here, I have them in my file */

.m-scene .scene_element {
  animation-duration: .5s;
  transition-timing-function: ease-in;
  animation-fill-mode: both;
}

.m-scene .scene_element--moveUpIn {
  animation-name: moveUp, fadeIn;
}

.m-scene.is-exiting .scene_element {
  animation-direction: alternate-reverse;
}

@keyframes moveUp {
  0% {
    transform: translateY(100%) 
  }
  100% { 
    transform: translateY(0%) 
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

这里是更先进的smoothState：

;(function($) {
  'use strict';
  var $body = $('html, body'),
  content = $('#main').smoothState({

    // Runs when a link has been activated
    onStart: {
      duration: 250, // Duration of our animation
      render: function (url, $container) {

        // toggleAnimationClass() is a public method
        // for restarting css animations with a class
        content.toggleAnimationClass('is-exiting');

        // Scroll user to the top
        $body.animate({
          scrollTop: 0
        });
      }
    }
  }).data('smoothState');
  //.data('smoothState') makes public methods available
})(jQuery);

最终我会添加预取， pageCacheSize 等...并根据您正在加载/退出的页面实施不同的转换。但是，在我解决上述问题之前，它还没有值得继续前进。

欢迎任何想法或帮助，非常感谢，谢谢。

哦，我也遇到了这个错误

XMLHttpRequest cannot load file:///Users/Parallelos/Developer/paralellos.github.io/projects.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
  n.ajaxTransport.k.cors.a.crossDomain.send @ jquery.min.js:4
  n.extend.ajax                             @ jquery.min.js:4
  fetch                                     @ jquery.smoothState.js:355
  load                                      @ jquery.smoothState.js:529
  clickAnchor                               @ jquery.smoothState.js:589
  n.event.dispatch                          @ jquery.min.js:3
  n.event.add.r.handle                      @ jquery.min.js:3

Answer 1

我处理了同样的问题。如果你下载了演示版并通过他们的函数.js＆＃39;您会注意到处理现有css类的不同方式。这是代码，测试过它，它对我有用。

$(function(){
  'use strict';
  var $page = $('#main'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        forms: 'form',
        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 2

我认为该方法已删除，而不是重新启动动画尝试

content.restartCSSAnimations()

content.toggleAnimationClass（）;不是一个功能

2 个答案: