Geek Answers Handbook

Content.toggleAnimationClass (); not a function

I have html and css working with the simplest using smoothState.js

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

However, even with this basic implementation, if you select a link to the current page (for example, reload the page), you will get a blank white screen with 2015 written in the upper left corner. with this error The error is not written to the console , which makes me think about the error with smoothState.js

If I extend to smoothState to use more advanced parameters (ie "is-exiting"), now it becomes impossible to navigate the site, navigate the page.

With the extended implementation shown at the end of this question, I get a 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 smoothState corresponds to 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 is a 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);

In the end, I plan to add prefetch , pageCacheSize , etc ... and implement a different transition depending on which page you load / exit. However, at this time, you should not move forward until I can solve the above problems.

Any ideas or help are appreciated and greatly appreciated, Thank you.

Oh, I got this error too

 XMLHttpRequest cannot load file:///Users/Parallelos/Developer/paralellos.imtqy.com/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
+5
source share
2 answers

I considered this same problem. If you download the demo and look at their "functions.js", you will notice another way to handle the outgoing css class. Here is this code, 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'); });
+10
source

I think this method is deleted, and not restart the try animation

 content.restartCSSAnimations()
0
source

More articles:


All Articles