Question

以下代码在chrome中生成预期结果，即;将转换延迟直接添加到所有元素。

$('.front-nav .sub-menu').each(function() {
    var transitionDelay = 50;
    $(this).find('li').each(function( index ) {
        var thisDelay = transitionDelay * index;
        thisDelay = thisDelay + 'ms';
        $(this).css('transition-delay', thisDelay);
    });
});

在Safari而不是转换延迟中，会向元素添加过渡样式。

jQuery在safari中添加的样式： style="transition: 50ms; -webkit-transition: 50ms;

jQuery在chrome中添加的样式： style="transition-delay: 0ms; -webkit-transition-delay: 0ms;"

Answer 1

我偶然发现了这个问题，因为我有同样的问题。通过一些实验，我发现Safari似乎行为正常，只是误导性的方式。如果将jQuery加载到空白页面并尝试使用您的方法在元素上设置transition-delay属性，则检查器将仅显示transition: ___，但如果您随后查询元素的transition属性，则我会看到它确实设置得恰到好处：

// in console
$(document.body).css('transition-delay', '0.3s') // sets `transition: 0.3s` on body
$(document.body).css('transition') // "all 0s ease 0.3s"

所以我们看到它正在做我们想要的。我遇到的问题是具有不同值的多个转换。例如：

$(document.body).css('transition-delay', '0.3s, 2s')

这似乎在检查器中的元素上设置transition: 0.3s, 2s，建议持续时间为0.3秒，延迟时间为2秒，但是当您要求transition-delay属性时，您会看到它仍为0。我认为这只是Safari在检查员中显示样式的一种不好的方式。

除了应用的明显样式之外，您是否注意到Safari中真正不同的行为？

jQuery css（）改变了转换延迟＆＃39;过渡＆＃39;过渡＆＃39;在野生动物园

1 个答案: