content.toggleAnimationClass(); это не функция

У меня есть HTML и CSS работает нормально с наиболее простым использованием smoothState.js

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

Однако даже с этой базовой реализацией, если вы выберете ссылку текущей страницы (то есть, чтобы перезагрузить страницу), вы получите пустой белый экран с 2015 годом, написанным в верхнем левом углу. с этой ошибкой в консоли не записано никаких ошибок, что заставляет меня думать, что это ошибка, обработанная smoothState.js

Если я расширяю smoothState, чтобы учесть более продвинутые параметры (например, "is-exiting"), теперь становится невозможным перемещаться по сайту, уходить со страницы.

С расширенной реализацией, показанной в конце этого вопроса, я получаю ошибку консоли:

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>

Вот соответствующий CSS smoothState:

/* 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);

В конце концов я планирую добавить prefetch, 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
Источник

2 ответа

Я имел дело с точно такой же проблемой. Если вы скачаете демоверсии и пройдете по их "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');

});
Источник

Я думаю, что метод удален, чтобы не перезапустить анимацию попробуйте

content.restartCSSAnimations()
Источник
Другие вопросы по тегам