每次点击 Mixitup 插件动画

如何解决每次点击 Mixitup 插件动画

我有一个博客页面，我在其中使用 mixitup 插件来过滤文章。问题是所有文章都排成一排。结果，当我依次单击“全部”和绿色时，只有滚动条会发生变化，因此对于发生的事情变得有点混乱。有没有一种方法可以在单击过滤器按钮时应用动画。请提出建议。提前致谢！

var containerEl = document.querySelector('#Container');

            var mixer = mixitup(containerEl);

.mix{
  height:100vh;
  border:3px solid red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="controls">
            <button type="button" class="control" data-filter="all">All</button>
            <button type="button" class="control" data-filter=".green">Green</button>
            <button type="button" class="control" data-filter=".blue">Blue</button>
            <button type="button" class="control" data-filter=".pink">Pink</button>
            
        </div>
<div id="Container">
            <div class="mix green">Blog 1</div>
            <div class="mix green">Blog 2</div>
            <div class="mix blue">Blog 3</div>
            <div class="mix pink">Blog 4</div>
            <div class="mix green">Blog 5</div>
            <div class="mix blue">Blog 6</div>
            <div class="mix pink">Blog 7</div>
            <div class="mix blue">Blog 8</div>

            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
        </div>