javascript - jQuery同位素动画不工作，但过滤工作

Question

我在昨天开发的网站上安装了同位素。直到一个小时前它工作正常。过滤器工作，但动画已停止。

我不确定是什么导致动画停止工作。我没有更改网站上的任何内容。代码位于页脚中，但我在下面提供了它：

    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/jquery.isotope.min.js"></script>

    <script>
    $(window).load(function(){
        var $container = $('#main-home');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        $('#filters a').click(function(){
            $('#filters .selected').removeClass('selected');
            $(this).addClass('selected');

            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
             });
             return false;
        }); 
    });
    </script>

如果有人有任何建议，我非常感谢您的帮助。这是我第一次使用 Isotope。

Answer 1

我解决了这个问题。我去了这个页面： http: //isotope.metafizzy.co/docs/animating.html并将 CSS 添加到网站中。

出于某种原因，它在没有 CSS 的情况下工作，不知道为什么我必须在动画事先正常工作后添加它。

Answer 2

如果你设置：

animationEngine: 'best-available'

同位素在 CSS3 Transition 和 jQuery animate() 之间选择动画

您现在可以在这里找到动画描述和 CSS 代码：http: //isotope.metafizzy.co/v1/docs/animating.html

Answer 3

您应该将以下样式添加到项目中。

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: .7s;
    -moz-transition-duration: .7s;
    transition-duration: .7s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}