MixItUp动画带有&溢出:隐藏'亲

时间:2015-03-02 15:48:31

标签: javascript jquery mixitup

我遇到MixItUp jQuery addon

的问题

当我在overflow: hidden父级内部初始化MixItUp容器时,我在init和过滤时遇到了动画问题。

使用overflow: hidden还有另一种动画效果,例如this

您可以在此fiddle

上查看示例

当你删除jsfiddle示例中的overflow: hidden时,它正在按预期工作。

在我的项目中,MixItUp位于iDangerous swiper内部,因此我无法移除' oveflow:hidden',因为它是必要的。

有没有办法用css或脚本解决这个问题?

HTML:

<div id="Container">
    <div id="Container2">
        <div class="mix"></div>
        <div class="mix"></div>
        <div class="mix"></div>
        <div class="mix"></div>
    </div>
</div>
<div class="filter" data-filter="all">All</div>
<div class="filter" data-filter="none">None</div>

CSS:

#Container {
    overflow: hidden;
}
.mix {
    background: black;
    display: none;
    width: 100px;
    height: 100px;
}

使用Javascript:

$(function () {

    $('#Container').mixItUp({
        animation: {
            effects: 'fade translateZ(-360px) stagger(34ms)'
        }
    });

});

1 个答案:

答案 0 :(得分:0)

解决。

解决方案: 将高度设置为#Container