content.toggleAnimationClass(); is not a function

2019-06-21 06:11发布

站内问答 / JavaScript
1235 2 5

I have the html and css working fine with the most basic use of smoothState.js 

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

However even with this basic implementation if you select the link of the current page, (i.e. to reload the page) you will get a blank white screen with 2015 written in the top left corner. with this error there is No error recorded in console which makes me think it's an error handled by smoothState.js

If I expand on smoothState to allow for the more advanced options, (i.e. 'is-exiting') it now becomes impossible to navigate through the site, move off the page.

With the advanced implementation, shown at the end of this question I get the console error:

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

Here's the 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>

Here's the smoothState relevant 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;
  }
}

And here's the more advanced 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);

Eventually I plane to add prefetch, pageCacheSize etc... and implement different transition depending on what page your are loading/exiting. However at this time it doesn't seen worth moving forward until I can resolve the above issues.

Any ideas or assistance is welcome and very much appreciated, Thanks.

Oh I just got this error also

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

2条回答
等我变得足够好
2楼-- · 2019-06-21 06:43

I think that method is removed, not to restart animation try

content.restartCSSAnimations()
查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
3楼-- · 2019-06-21 06:44

I dealt with this exact same issue. If you download the demo's and go through their 'functions.js' you'll notice a different way of handling the exiting css class. Here is that code, have tested it and it works for me.

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

});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)