javascript - MixItUp 动画与 'overflow: hidden' 父级

Question

我对MixItUp jQuery addon有疑问

当我在 overflow:hidden 父级中初始化 MixItUp 容器时，我在初始化和过滤方面遇到了动画问题。

使用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)'
        }
    });

});

Answer 1

已解决。

解决方案:设置#Container 的高度