Javascript jQuery css（）正在更改'；转换延迟'；至'；过渡'；狩猎

以下代码在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=“转换：50ms；-webkit转换：50ms；

jQuery在chrome中添加的样式：

---

style=“转换延迟：0毫秒-webkit转换延迟：0ms；“

我偶然发现了这个问题，因为我也遇到了同样的问题。通过一点实验，我发现Safari似乎运行正常，只是有误导性。如果您将jQuery加载到空白页面，并尝试使用您的方法设置元素的transition delay属性，那么检查器将只显示

transition:\uuuuu

，但如果随后查询元素的

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')

这似乎在inspector中的元素上设置了

transition:0.3s，2s

，建议使用0.3s持续时间和2s延迟，但是当您要求使用

transition delay

属性时，您会看到它仍然是0s。我认为这对于Safari在inspector中显示样式的部分来说是一种糟糕的方式

---

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

我已经看了一段时间了，今天晚些时候我将做一些进一步的测试，并让您知道：）