我曾尝试在同位素元素上使用一些 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 效果,因为这些可能会与 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 或使用未记录的 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);
};
关于javascript - 同位素动画效果不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27802171/