safari css()将jQuery中的'transition-delay‘改为'transition’

Question

下面的代码在chrome中产生了预期的结果，即直接向所有元素添加transition-delay。

$('.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;

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中真正不同的行为？