过滤时出现奇怪的Isotope.js动画

Question

当我设置并使用此过滤器时，该功能可以正常工作，只有一件事。 筛选过程中出现奇怪的动画。

在我的Codepen中 ，代码效果很好。 复制并粘贴相同的JS版本和相同的构建版本。

在我的网站上不起作用。 现在，我遍历并禁用了所有插件和除我的代码（被放置在独立的.js文件和CSS文件中）之外的所有脚本。

我不确定问题到底是什么，也无法弄清楚如何进一步隔离问题以找出问题。

我正在WordPress版本4.7.5上运行网站

以下是我的JavaScript。 这是我唯一要打电话的东西。

(function($){
  'use strict';

    var grid = jQuery('.masonry').isotope(),
        $win = jQuery(window);

    jQuery('.filter span a').click(function(){
    jQuery( this ).parents( 'div.filter' ).find( 'span a' ).removeClass( 'active' );
    jQuery( this ).addClass( 'active' );

    grid.isotope({
      filter: jQuery(this).attr('data-filter'),
      layoutMode: 'fitRows',
    })
  });
});

Answer 1

删除<link rel='stylesheet' id='isotope-style-css' ...> CSS。

除非您指定仅使用CSS（ 请参阅Metafizzy文档中的animationEngine ），否则它将同时加载jQuery动画和CSS －导致异常。 您可以通过检查您在此处重复的CodePen来验证这一事实，这很奇怪，因为我添加了CSS： http ://codepen.io/carasmo/pen/KmrPRb

Answer 2

您在控制台中出错： «未捕获的TypeError：无法读取null的属性'firstChild' 。

这是因为您尝试在不存在的元素#map-canvas上启动Google Map。

要解决此问题...我要做的是从script.js删除＃881至＃1183行，这是您的Google Map API初始化脚本。

我将其放置在map.js中，我只会在实际上存在ID为map-canvas的元素的页面上调用它。

目前，此错误只是停止了script.js的加载。
因此， document.ready()函数未正确关闭。

您使用了(function($){与第＃209行上的document.ready()相同。