Fatal编程技术网
  • javascript/
  • Javascript content.toggleAnimationClass（）；这不是一个函数

Javascript content.toggleAnimationClass（）；这不是一个函数

javascript jquery html css

Javascript content.toggleAnimationClass（）；这不是一个函数,javascript,jquery,html,css,smoothstate.js,Javascript,Jquery,Html,Css,Smoothstate.js,我有html和css可以很好地使用最基本的smoothState.js 但是，即使使用此基本实现，如果您选择当前页面的链接（即重新加载页面），您也会看到一个空白的白色屏幕，屏幕左上角写着2015。有了这个错误，控制台中没有记录任何错误，这让我认为这是由smoothState.js处理的错误 如果我在smoothState上展开以允许更高级的选项（即“正在退出”），那么现在就不可能在站点中导航，请离开页面 通过高级实现，如本问题末尾所示，我得到了控制台错误： Uncaught TypeError:

我有html和css可以很好地使用最基本的smoothState.js

但是，即使使用此基本实现，如果您选择当前页面的链接（即重新加载页面），您也会看到一个空白的白色屏幕，屏幕左上角写着2015。有了这个错误，控制台中没有记录任何错误，这让我认为这是由smoothState.js处理的错误

如果我在smoothState上展开以允许更高级的选项（即“正在退出”），那么现在就不可能在站点中导航，请离开页面

通过高级实现，如本问题末尾所示，我得到了控制台错误：

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>

/* 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);
最后我计划添加预取，页面缓存大小等。。。并根据正在加载/退出的页面实现不同的转换。然而，在我解决上述问题之前，目前还没有看到值得向前推进的地方

欢迎您提供任何想法或帮助，我们非常感谢，谢谢。

哦，我刚才也犯了这个错误

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
我想那个方法是删除的，不要重启动画试试

content.restartCSSAnimations()
我处理了完全相同的问题。如果您下载了演示并浏览了它们的“functions.js”，您将注意到处理现有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');

});
其中是
toggleAnimationClass
definition。。我认为这不是一个插件function@ArunPJohny我只是假设它是在
jquery.smoothState.js
中定义的，给定的
toggle（）
是jquery方法，文档中使用了
toggleAnimationClass（）。你用过吗？您或其他人是如何实现
toggleAnimationClass（）
？这似乎改善了一些情况。使用
restartssanimations（）
我现在可以在网站上四处走动了。然而，我相信
toggleAnimationClass（）
背后的想法是动态添加
。正在退出
动画，以便页面转换将在当前退出的页面上运行。在此
restartssanimations（）
use下，当前页面消失，然后新页面在中转换。另外，如果我点击当前页面链接，我仍然会看到在左上角写着2015的空白白色页面。@Paralellos我以前没有使用过这个插件。。但只是通过代码找到了这个方法。。但是在当前的代码库中，我找不到
toggleAnimationClass
方法。。。可能是相同的支持被删除了？是的，我看到了。真奇怪。那么你认为他们只是没有更新示例来展示这个新方法吗？@Paralellos看起来像。。。示例中使用的代码具有以下方法。。如果需要，可以尝试从附加的js文件中提取插件代码

$(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');

});