带有“溢出：隐藏”父级的 MixItUp 动画答案

【问题标题】：MixItUp animation with 'overflow: hidden' parent带有“溢出：隐藏”父级的 MixItUp 动画
【发布时间】：2015-03-02 15:48:30
【问题描述】：

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

});

【问题讨论】：

改进了一些格式和网址
@FabioAntunes 有问题的代码仍然是必需的。请添加一个密切投票。编辑是可选的。
@JanDvorak 在这种情况下，我添加了 jsfiddle 代码，而不是投票结束一个非常合理的问题。解决问题总是比帮助新用户更容易。
这也行。现在看来可以回答了——除非人们发现这个问题还不清楚。
感谢您的帮助，并对错误的问题格式表示歉意。看不出动画的区别吗？使用“溢出：隐藏”，还有一个额外的“向上滑动”动画。

标签： javascript jquery mixitup

【解决方案1】：

解决了。

解决方案：为#Container 设置高度

【讨论】：