css - 为什么这个 css "transition"值是 "invalid property value"

Question

我有以下 CSS(和相同的前缀版本):

transition: -webkit-box-shadow 0.4s ease-out,
            box-shadow         0.4s ease-out,
            -webkit-transform  0.4s ease-out,
            transform          0.4s ease-out,
            opacity            0.4s ease-out,
            -webkit-opacity    0.4s ease-out;

关于哪个 Chrome 让我胡说八道:

将鼠标悬停在警告标志上会弹出工具提示:“无效的属性值”。

我看不出区别(来自 CSS-Tricks ):

You may comma separate value sets to do different transitions on different properties:

div {
    transition: background 0.2s ease,
                padding 0.8s linear;
}

请注意，我不能使用 all，因为我在 JS 中设置了 .style 属性，我不想设置动画(除非有办法排除 >top 和 left 并仍然使用 all，这很好!)。

我怎样才能让我的转换再次工作？任何建议表示赞赏。

---

编辑:删除前缀的并没有解决它，在转换及其前缀形式上仍然是“无效的属性值”。

编辑 2:我完全糊涂了。我已将其简化为这个仍然无效的代码:

-webkit-transition: transform 0.4s ease-out, opacity 0.4s ease-out;
transition: transform 0.4s ease-out, opacity 0.4s ease-out;

编辑 3:原来解决方案只是更新 Chrome!如果可能的话，我仍然想要一个解决方法。

Answer 1

这不是无效的值属性。

spec说

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’. In other words, unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.

因此，即使您使用供应商前缀，它仍然有效。