很好奇是否有人能够更改与 jquery Isotope 一起使用的 CSS3 转换,以使用“transition-delay: 0s, 1s;”之类的内容添加元素随机播放的延迟。
我希望它们先向左洗牌,然后向下洗牌,以便在过滤时获得更数学化的感觉(而不是默认的“对 Angular 洗牌”)。似乎对默认 css3 过渡所做的任何更改都不起作用。
这是我当前的 CSS:
/**** Isotope Animating ****/
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
任何输入都会很棒!
最佳答案
参见http://jsfiddle.net/desandro/QwWv7/
您可以为要转换的每个 CSS 属性设置延迟。但由于变换在一次变换中包含 X 和 Y 平移,因此您必须回退到使用绝对/相对定位,以便可以为 left
和 top 设置单独的延迟
。通过选项中的设置 transformsEnabled: false
来实现此目的
$container.isotope({
itemSelector: '.item',
transformsEnabled: false
});
然后,您需要更改顶部和左侧的 transition-property
CSS
.isotope .isotope-item {
/* multiple -vendor declarations omited for brevity */
transition-property: left, top, opacity;
}
最后,为每个属性添加 transition-delay
值。我们只想延迟top
。
.isotope .isotope-item {
transition-delay: 0s, 0.8s, 0s;
}
关于jQuery 同位素动画延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9506057/