同位素动画效果不起作用

Question

我曾尝试在同位素项目上使用一些 CSS3 转换，但它无法正常工作，元素以一种奇怪的方式运行。我想要实现的是让物品具有褪色效果，就像这里的这个 http://www.keatonpricedesign.com/#works。提前致谢

他就是我所拥有的http://codepen.io/GranitS/pen/VYmNdJ

<div id="filters" class="button-group">
<button class="button is-checked" data-filter="" id="all-filter">All</button>
<button class="button" data-filter=".one">One</button>
<button class="button" data-filter=".two">Two</button>
<button class="button" data-filter=".three">Three</button>
</div>
<div class="isotope">
<div class="item one"> 1 </div>
<div class="item two"> 2 </div>
<div class="item three"> 3 </div>
<div class="item four"> 4 </div>
</div>

CSS:

.item{
width:50px; height:50px;
background-color:red;
float:left;
padding:20px;
margin:20px;
}

.isotope,
.isotope .item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
   -ms-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
      transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
 -moz-transition-property: height, width;
  -ms-transition-property: height, width;
   -o-transition-property: height, width;
      transition-property: height, width;
}

.isotope .item {
-webkit-transition-property: -webkit-transform, opacity;
 -moz-transition-property:    -moz-transform, opacity;
  -ms-transition-property:     -ms-transform, opacity;
   -o-transition-property:      -o-transform, opacity;
      transition-property:         transform, opacity;
}

Answer 1

你能不能只删除这部分 CSS:

.isotope,
.isotope .item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
      transition-duration: 0.8s;
}

Answer 2

您不应该使用 CSS 来尝试控制同位素效应，因为这些可能会与同位素的转换发生冲突，从而导致您看到的奇怪效果。在初始化 Isotope 时，您应该删除 .isotope 样式并使用 visibleStyle、hiddenStyle 和 transitionDuration 选项。

var iso = new Isotope( '.isotope', {
    itemSelector: '.item',
    layoutMode: 'fitRows',
    hiddenStyle: {
      opacity: 0
      /* , transform: 'scale(0.001)' -- disabled scaling */
    },
    visibleStyle: {
      opacity: 1
      /* , transform: 'scale(1)' -- disabled scaling */
    },
    transitionDuration: '0.8s'
});

您可以在 Isotope options page.

上阅读更多相关信息

Here is a codepen 应用了这些更改。

编辑：

Isotope 不支持仅使用任何内置选项关闭位置转换（尽管您可以通过将 transitionDuration 设置为 0 来关闭 all 转换或使用未记录的 isLayoutInstant: true 选项），但您可以覆盖 _positionItem 函数以强制执行您想要的行为。只需将以下代码放在 JavaScript:

的开头

var positionFunc = Isotope.prototype._positionItem;
Isotope.prototype._positionItem = function( item, x, y, isInstant ) {
  // ignore actual isInstant value, pass in `true` to the original function;
  positionFunc(item, x, y, true);
};

Here is an updated codepen 已应用。

Answer 3

我并不是说这是最好的方法，但是如果您硬覆盖 transition 属性，它会阻止其他动画的发生。你可以尝试这个想法，它可能会让你走上正轨：

.isotope .item {
  transition-property: opacity !important;
}

如果你想玩它，它就是你的笔，但有一些变化：http://codepen.io/anon/pen/myOYeE

您也可以添加@markegli 的部分来帮助淡化：

hiddenStyle: { opacity: 0 },
visibleStyle: { opacity: 1 }

同位素动画效果不起作用

Isotope animation effects not working

javascript

css

jquery