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个样式，而是在初始化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或使用未记录的{来关闭所有转换{1}}选项），但您可以覆盖isLayoutInstant: true函数以强制执行所需的操作。只需将以下代码放在JavaScript的开头：

_positionItem

Here is an updated codepen已应用此功能。

Answer 2

我不是说这是最好的方法，但是如果你对transition属性进行硬覆盖，它会阻止其他动画发生。你可以玩这个想法，它可能会让你在路上：

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

如果您想玩它，那么您的笔会有一些变化：http://codepen.io/anon/pen/myOYeE

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

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

Answer 3

你能不能只删除这部分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;
}

同位素动画效果不起作用

3 个答案: