javascript - 无法关闭 jquery masonry + waypoint 中的动画

Question

滚动工作正常，但我想摆脱动画。

我尝试了所有推荐的解决方案，例如这里提到了一个http://desandro.github.io/masonry/docs/animating.html但没有任何效果。

砖石代码:

<script src="{{asset('js/vendor/masonry.pkgd.min.js')}}"></script>
<script src="{{asset('js/vendor/waypoints.min.js')}}"></script>
<script src="{{asset('js/vendor/waypoints-infinite.js')}}"></script>
<script>
    $(window).load(function () {
        /*var container = $('.infinite-container');*/
        var container = $('.infinite-container').masonry({
            // options...
            itemSelector: '.wish-box',
            isAnimated: false,
            animated: false,
          });

        $('.infinite-container').waypoint('infinite', {
            container: 'auto',
            items: '.wish-box',
            more: '.infinite-more-link',
            offset: 'bottom-in-view',
            loadingClass: 'infinite-loading',
            onBeforePageLoad: $.noop,
            animate: false,
            onAfterPageLoad: function () {
                try {
                    container.masonry('reloadItems');
                    container.masonry('layout');
                } catch (err) {
                    alert(err.message);
                }
            }
        });
    });
</script>

waypoints-infinite.js的代码:

// Generated by CoffeeScript 1.6.2
/*
Infinite Scroll Shortcut for jQuery Waypoints - v2.0.5
Copyright (c) 2011-2014 Caleb Troughton
Licensed under the MIT license.
https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt
*/

var current_uri = window.location.pathname;

(function() {
  (function(root, factory) {
    if (typeof define === 'function' && define.amd) {
      return define(['jquery', 'waypoints'], factory);
    } else {
      return factory(root.jQuery);
    }
  })(window, function($) {
    var defaults;

    defaults = {
      container: 'auto',
      items: '.infinite-item',
      more: '.infinite-more-link',
      offset: 'bottom-in-view',
      loadingClass: 'infinite-loading',
      onBeforePageLoad: $.noop,
      onAfterPageLoad: $.noop
    };
    return $.waypoints('extendFn', 'infinite', function(options) {
      var $container, opts;

      opts = $.extend({}, $.fn.waypoint.defaults, defaults, options);
      if ($(opts.more).length === 0) {
        return this;
      }
      $container = opts.container === 'auto' ? this : $(opts.container);
      opts.handler = function(direction) {
        var $this;

        if (direction === 'down' || direction === 'right') {
          $this = $(this);
          opts.onBeforePageLoad();
          $this.waypoint('destroy');
          $container.addClass(opts.loadingClass);
          return $.get($(opts.more).attr('href'), function(data) {
            var $data, $more, $newMore, fn;

            $data = $($.parseHTML(data));
            $more = $(opts.more);
            $newMore = $data.find(opts.more);
            //append for wishes and prepend for messages
            if(current_uri.indexOf("messages") !== -1) {
                $container.prepend($data.find(opts.items));
            } else {
                $container.append($data.find(opts.items));
            }
            $container.removeClass(opts.loadingClass);
            if ($newMore.length) {
              $more.replaceWith($newMore);
              fn = function() {
                return $this.waypoint(opts);
              };
              setTimeout(fn, 0);
            } else {
              $more.remove();
            }
            return opts.onAfterPageLoad();
          });
        }
      };
      return this.waypoint(opts);
    });
  });

}).call(this);

Answer 1

看起来您使用的是 Masonry v3，其中删除了动画选项，因此 isAnimated: false,动画: false 不相关。您可以使用这个:

   var container = $('.infinite-container').masonry({
        // options...
        itemSelector: '.wish-box',
       transitionDuration: 0
      });