Question

我目前正在设置延迟：

.isotope .isotope-item {
    -webkit-transition-property: left, top, opacity;
    -moz-transition-property: left, top, opacity;
    -ms-transition-property: left, top, opacity;
    -o-transition-property: left, top, opacity;
    transition-property: left, top, opacity;
    -webkit-transition-delay: 0s, 0.8s, 0s;
    -moz-transition-delay: 0s, 0.8s, 0s;
    -ms-transition-delay: 0s, 0.8s, 0s;
    -o-transition-delay: 0s, 0.8s, 0s;
    transition-delay: 0s, 0.8s, 0s;
}

我在jQuery中有一个条件语句，需要能够改变我的延迟：

.isotope .isotope-item {
    -webkit-transition-delay: 2s, 0.8s, 0s;
    -moz-transition-delay: 2s, 0.8s, 0s;
    -ms-transition-delay: 2s, 0.8s, 0s;
    -o-transition-delay: 2s, 0.8s, 0s;
    transition-delay: 2s, 0.8s, 0s;
}

任何想法是否可以实现或任何其他解决方案来解决这个问题？

Answer 1

在您的情况下，将另一个类添加到需要更长延迟的元素，例如foo，然后将第二个样式更改为：

.isotope .isotope-item.foo {
    -webkit-transition-delay: 2s, 0.8s, 0s;
    -moz-transition-delay: 2s, 0.8s, 0s;
    -ms-transition-delay: 2s, 0.8s, 0s;
    -o-transition-delay: 2s, 0.8s, 0s;
    transition-delay: 2s, 0.8s, 0s;
}

更高的特异性将确保这些元素获得更长的延迟时间。

Answer 2

jQuery可以很好地处理供应商前缀。

$(".isotope-item").css('-webkit-transition-delay', '2s, 0.8s, 0s' )
   .css('-moz-transition-delay', '2s, 0.8s, 0s')
   .css('-ms-transition-delay', '2s, 0.8s, 0s')
   .css('-o-transition-delay', '2s, 0.8s, 0s')
   .css('transition-delay', '2s, 0.8s, 0s');

如果您不想添加像Rory建议的新类，

将起作用。

http://jsfiddle.net/qzuDr/

使用jquery更改-webkit-transition-delay

2 个答案: