MixItUp动画与'溢出:隐藏'父母亲

MixItUp animation with 'overflow: hidden' parent

本文关键字：隐藏 父母亲 溢出 MixItUp 动画      更新时间：2023-09-26

我在上的MixItUp jQuery插件有问题

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

有了overflow: hidden，还有另一种类似的动画效果

你可以在这个小提琴上看到一个例子

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

在我的项目中，MixItUp在iDangerous刷程序中，所以我不能删除"oveflow：隐藏"，因为这是必要的。

有没有办法解决这个问题，用css或script？

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

已解决。

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

相关文章：