同位素动画效果不起作用

Isotope animation effects not working

本文关键字：不起作用 动画 同位素      更新时间：2023-09-26

>我尝试在同位素项目上使用一些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;
}

你不应该使用CSS来尝试控制同位素效应，因为这些效应可能与同位素的转变冲突，导致你看到的奇怪效应。初始化同位素时，应删除.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 不支持仅关闭具有任何内置选项的位置转换（尽管您可以通过将transitionDuration设置为 0 或使用未记录的 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);
};

这是应用此内容的更新代码笔。

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

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

如果你想玩它，它是你的笔，有几个变化：http://codepen.io/anon/pen/myOYeE

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

hiddenStyle: { opacity: 0 },
visibleStyle: { opacity: 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;
}
相关文章：