Safari瀏覽器不採取的過渡性從添加類

Fiddle for testing (click the black container)Safari瀏覽器不採取的過渡性從添加類

我有一個動畫我使用了一系列從我添加和刪除類的div的編碼。動畫是完整的，並且在Firefox和Chrome中應該可以正常工作。但是，我在Safari中遇到了問題：對象未佔用新增類中的transition屬性，而僅使用transition屬性的初始類。

例如：

enter image description here

的div有兩個.circle類和.circle.grow類，當我想使圓更大的div被添加。你可以在成長班上看到，div已經採用了transform屬性.grow，其中規模返回到（1,1）。但是，包含在.grow中的transition不會添加，而是會附加.circle中的初始transition屬性，該屬性不會轉換transform屬性。因此，當添加.grow時，該圓形會跳轉到新的比例。如上所述，在Chrome和Safari中，它的工作狀況非常好，它具有.grow的轉換屬性。有誰知道爲什麼會發生這種情況？

編輯1：經過多一點測試後，我嘗試從最初的圓類中去除transition屬性。然而，當添加circle.grow類時，transition屬性仍然被刪除，並且它們都沒有應用，儘管沒有任何回覆。或許如何在.circle.grow中定義transition屬性在某種程度上對Safari無效？據推測，我可以將transition屬性重新放在基類.circle類中，如果它的transition有效，它將被覆蓋.cricle.grow。但它不是

SO（？）：什麼是錯的代碼：

transition: transform 0.3s, width 0.3s; 
-moz-transition: transform 0.3s, width 0.3s; 
-webkit-transition: transform 0.3s, width 0.3s;

是使Safari無法讀取或執行它？

來源

2015-04-02 GtwoK

你試過將它們設置爲不同的持續時間，看它是否仍然如此？這可能與他們具有相同風格的事實有關。 – Rorschach120 2015-04-02 20:31:42

@ Rorschach120剛試過，沒效果。無論如何，它們不是相同的轉變;一個是'變換0'。3s，寬度0.3s'，另一個是寬度0.3s'。 – GtwoK 2015-04-02 21:35:33

啊！我解決了它！這是一個奇怪的問題，考慮到它在Chrome/FF中的工作，但應該是顯而易見的。

解決方案很簡單：Safari只會執行-webkit-轉換。但是當它嘗試時，其中一個是Safari不接受的轉換屬性。我需要做的只是在其各自的供應商前綴transition s中爲每個transform添加供應商前綴。像這樣：

transition: transform 0.3s, width 0.3s; 
-moz-transition: -moz-transform 0.3s, width 0.3s; 
-webkit-transition: -webkit-transform 0.3s, width 0.3s;

來源

2015-04-02 23:02:16 GtwoK

看起來這是一個語法問題。

CSS：

.circle.grow { 
    transition: transform 0.3s, width 0.3s; 
    -moz-transition: transform 0.3s, width 0.3s; 
    -webkit-transition: -webkit-transform 0.3s, width 0.3s; 
    transform: translate(-50%,-50%) scale(1,1); 
    -moz-transform: translate(-50%,-50%) scale(1,1); 
    -webkit-transform: translate(-50%,-50%) scale(1,1); 
}

來源

2015-04-03 15:43:17

Safari瀏覽器不採取的過渡性從添加類

回答

相關問題