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

Question

当我设置并使用此过滤器时，除了一件事外，该功能有效。过滤过程中出现奇怪的动画。

In my codepen 代码运行良好。使用相同的 JS 版本和相同的构建版本复制并粘贴。

In my website 不行。现在我已经检查并禁用了所有插件和每个被调用的脚本，除了我的代码，它被放置在一个独立的 .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

您在控制台中遇到错误：«Uncaught TypeError: Cannot read 属性 'firstChild' of null».

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

要解决这个问题... 我要做的是删除行 #881 到 #1183，这是你的 Google 地图 API 初始化脚本，来自 script.js.

我会把它放在 map.js 中，我只会在实际存在 ID 为 map-canvas.

的元素的页面上调用它

现在，这个错误只会停止加载 script.js。
所以 document.ready() 函数没有正确关闭。

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

Answer 2

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

除非您指定仅使用 CSS（see animationEngine in the Metafizzy docs) then it's going to load both the jQuery animation and the CSS -- causing the weirdness. You can test out this fact by checking out your CodePen duplicated here with the weirdness because I added the CSS: http://codepen.io/carasmo/pen/KmrPRb

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

Weird Isotope.js Animation when filtering

javascript

jquery

wordpress

jquery-isotope