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'

Isotope选择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;
}

jQuery Isotope动画不工作但过滤IS工作

3 个答案: