Fiddle for testing (click the black container)Safari瀏覽器不採取的過渡性從添加類
我有一個動畫我使用了一系列從我添加和刪除類的div的編碼。動畫是完整的,並且在Firefox和Chrome中應該可以正常工作。但是,我在Safari中遇到了問題:對象未佔用新增類中的transition
屬性,而僅使用transition
屬性的初始類。
例如:
的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無法讀取或執行它?
你試過將它們設置爲不同的持續時間,看它是否仍然如此?這可能與他們具有相同風格的事實有關。 – Rorschach120 2015-04-02 20:31:42
@ Rorschach120剛試過,沒效果。無論如何,它們不是相同的轉變;一個是'變換0'。3s,寬度0.3s',另一個是寬度0.3s'。 – GtwoK 2015-04-02 21:35:33