Question

我在这里非常新，非常感谢我能得到的任何帮助。

我正在使用MixItUp插件来创建图库。我已经设置了一些占位符，并且我已经过滤了在Firefox上正常工作。然而，在铬合金上，这些物品似乎在过渡期间飞来飞去，然后攫取到位。

以下是codepen：http://codepen.io/nvenk/pen/Bpzqqv

HTML

<div class="container">
  <div class="controls">
    <button class="filter" data-filter=".photo">Photo</button>
    <button class="filter" data-filter=".art">Art</button>
    <button class="filter" data-filter="all">All</button>
  </div>

  <div class="gallery">
    <div class="mix photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
    </div>
    <div class="mix art">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
    </div>
    <div class="mix photo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
    </div>
    <div class="mix art">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
    </div>
  </div>
</div>

CSS

.container .controls {
  text-align: center
}

.container .gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 3px;
  -moz-column-gap: 3px;
  column-gap: 3px;
  width: 100%
}

.container .gallery .mix img {
  width: 100%;
}

JS

$('.gallery').mixItUp({
  animation: {
    duration: 350,
    effects: 'fade translateY(40px)',
    easing: 'ease',
  }
});

依赖关系是jQuery和mixitup.js。

我在JS上并不擅长，这是我第一次使用MixItUp，所以请原谅我错过的任何明显的事情。

MixItUp Chrome bug - 过渡期间飞来飞去的元素

0 个答案: