javascript – content.toggleAnimationClass();不是一个功能

我使用smoothState.js最基本的使用html和css工作正常

;(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：

这是smoothState相关的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;
  }
}

这是更高级的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

最佳答案

我处理了同样的问题.如果您下载演示版并通过他们的’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');

});

原文地址：https://www.jb51.cc/html/426895.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。