javascript - jQuery css() 在 safari 中将 'transition-delay' 更改为 'transition'

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 中，代替 transition-delay，向元素添加了过渡样式。

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

chrome中jQuery添加的样式: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.3s，延迟为 2s，但是当您要求 transition-delay属性，你会看到它仍然是 0。我认为这只是 Safari 在检查器中显示样式的一种糟糕方式。

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