admin管理员组

文章数量:1279087

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 bees 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=".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 wele 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

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 bees 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./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 wele 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
  • javascript
  • jquery
  • html
  • css
  • smoothstate.js
Share Improve this question edited Aug 11, 2015 at 5:01 Mudlabs asked Aug 11, 2015 at 4:01 MudlabsMudlabs 5795 silver badges17 bronze badges 2
  • where is toggleAnimationClass definition.. I think it is not done as a plugin function – Arun P Johny Commented Aug 11, 2015 at 4:05
  • @ArunPJohny I just assumed it was defined in jquery.smoothState.js given toggle() is jQuery method and toggleAnimationClass() is used in the documentation, Add page transitions to your site. Have you used it? How have you or others implemented toggleAnimationClass()? – Mudlabs Commented Aug 11, 2015 at 4:53
Add a ment  | 

2 Answers 2

Reset to default 12

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

});

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

content.restartCSSAnimations()

本文标签： javascriptcontenttoggleAnimationClass() is not a functionStack Overflow

版权声明：本文标题：javascript - content.toggleAnimationClass(); is not a function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741273902a2369615.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。