IE10/11 使用 transition:-webkit-transform?

Question

在 IE10 或 11 中查看此 JSBin 。

如果您檢查#test元素，您會看到它顯示的 transition 屬性為-webkit-transform （並且沒有發生過渡）。 如果您注釋掉transition: -webkit-transform; 聲明，如在這里，然后過渡工作。

為什么 IE 沒有將供應商前綴值作為無效的屬性值刪除？ 順便說一句，如果我在 Chrome 上做類似的事情——比如，在-webkit-transition之后放置-ms-transition -webkit-transition ——它會按原樣刪除它，並且只使用-webkit-transition聲明。 似乎只有在 IE 上，這是一個問題。

Answer 1

我只是對此進行了更多研究，它看起來更像是 Chrome 錯誤而不是 IE。

以下是規范中關於transition-property無法識別和不可動畫transition-property ：

如果列出的標識符之一不是可識別的屬性名稱或不是可動畫的屬性，則實現仍必須在列表中的相應索引處使用持續時間、延遲和計時函數在列表中的可動畫屬性上開始轉換，以便 '過渡持續時間”、“過渡延遲”和“過渡時間函數”。 換句話說，無法識別或不可動畫的屬性必須保留在列表中以保留索引的匹配。

該規范似乎沒有考慮到指定的屬性都不受支持或可動畫的情況，甚至在轉換 propdefs 之后的部分也不例外。 看起來 IE 將聲明視為有效，盡管沒有要轉換的受支持屬性，從而覆蓋先前的聲明，並有效地使聲明等效於transition-property: none （即結果相似，但正如您所觀察到的該值實際上並未計算為none ）。

Firefox 的行為方式似乎與 IE 相同，將聲明視為等價於transition-property: none 。

此外，如果您將無前綴和帶前綴的transform屬性名稱放在同一個聲明中，IE 和 Firefox 將很好地為轉換設置動畫（順序無關緊要）：

transition: -webkit-transform 1s, transform 1s;

但是，如果您將希望與導致 Chrome 刪除聲明的無法識別的屬性一起使用的任何其他屬性放置...它仍然會刪除該聲明。 是的，IE 和 Firefox 在上面的聲明中正確應用了轉換， Chrome 完全忽略了它。

不過，它似乎只有未知屬性名稱的問題。 例如，如果您指定一個受支持但不可設置動畫的屬性，例如background-image ：

transition: -webkit-transform 1s, background-image 1s;

Chrome 能夠很好地為轉換設置動畫。

盡管如此，我仍然不能完全確定規范是否含糊不清，或者 IE 和 Firefox 中顯示的行為實際上是否正確。 聽起來無論哪種方式都可以進行一些澄清，所以我已經繼續向 CSSWG發送了有關此事的電子郵件。