SVG CSS轉換動畫，跨瀏覽器問題

我正在爲我正在構建的網站設計一個簡單的漢堡包菜單SVG圖標。爲了讓經常使用的圖標變得無趣，我認爲在其中添加一些動畫會很好。我決定讓三根單槓轉動（每一根單獨）形成一個十字。SVG CSS轉換動畫，跨瀏覽器問題

當我在Mac上開發時，Safari是我測試它的第一個瀏覽器，並且所有內容都按預期工作。但後來我決定在Firefox中打開相同的文件，看看動畫是否被破壞。在進一步調查這個問題時，我注意到反轉應用於酒吧的CSS轉換的順序具有完全相反的效果：Firefox中的結果是完美的，而Safari則錯誤地顯示了圖標。

用於漢堡包圖標的簡化的代碼：

<svg id="hamburger" viewBox="0 0 30 30" width="30" height="30"> 
    <rect id="top" x="0" y="8px" width="30" height="2"/> 
    <rect id="middle" x="0" y="15px" width="30" height="2"/> 
    <rect id="bottom" x="0" y="22px" width="30" height="2"/> 
</svg>

物在薩斯文件添加用下面的代碼動畫：

#top, 
#middle, 
#bottom { 
    transform-origin: center; 
    transform: none; 
    transition: transform .5s ease; 
} 

#hamburger.active { 
    #top { 
    transform: translateY(7px) rotate(45deg); 
    } 
    #middle { 
    transform: rotate(135deg); 
    } 
    #bottom { 
    transform: translateY(- 7px) rotate(45deg); 
    } 
}

奇怪的是，當順序translate和rotate轉換已翻轉，兩個不同的瀏覽器顯示完全相反的結果。我知道變換的順序會影響最終的結果（儘管我認爲在這種情況下它不應該），但我不明白爲什麼通過切換順序來顛倒'兼容性'。

我用上面的代碼創建了2個幾乎完全相同的Codepen示例。唯一的區別是translate和rotate變換順序：

作品在Safari，Firefox中破：在Safari破碎 http://codepen.io/Dimiter/pen/jrBqry
，在Firefox工作：http://codepen.io/Dimiter/pen/vKxGRY

正確的，工作動畫：

破碎的動畫：

非常感謝提前！

來源

2016-06-27 Dimiter

感謝您的問題。這是一個非常有趣的Firefox問題。我測試了這兩種情況，事實上webkit與您的代碼沒有任何問題，而Firefox則錯位了這些元素。

我認爲這可能是由於跨瀏覽器的變換來源差異。

無論哪種方式，我可以幫助你的漢堡包成爲firefox中的十字架，通過添加一個-moz-transition屬性來爲轉換創建一些不同的值。

嘗試更新你的代碼這一點，並告訴我，如果它解決您的問題:)

#hamburger.active { 
    #top { 
    transform: translateY(7px) rotate(45deg); 
    -moz-transform: translate(-5px,3px) rotate(45deg); 
    } 
    #middle { 
    transform: rotate(135deg); 
    } 
    #bottom { 
    transform: translateY(-7px) rotate(45deg); 
    -moz-transform: translate(5px,-7px) rotate(45deg); 
    } 
}

還記得寫負值沒有空格。所以像這樣「-7px」不喜歡這個「 - 7px的」

來源

2016-06-28 07:33:25 wick3d

感謝您的回答！這確實解決了這個問題。我認爲這是由於Firefox中的這個特定錯誤：https：//bugzilla.mozilla.org/show_bug.cgi？id = 1209061＃c0。我意識到減號，但幸運的薩斯編譯到正確的形式:) – Dimiter

很高興它爲你工作 - 玩得開心動畫;] – wick3d

有點遲了，但這裏有一點信息。這在任一瀏覽器中都不會被破壞。瀏覽器爲'transform-box'設置了不同的默認值。這就是控制'transform-origin'的參考框。 Firefox將其設置爲SVG包裝。 Safari和Chrome將它設置爲正在轉換的元素。目前，FF根據規範是正確的。但是，規格可能會發生變化。詳情請看這裏：https://bugzilla.mozilla.org/show_bug.cgi?id=1209061#c6 –

這是一個有點晚了另一種答案，但給KUTE.js Plugin與變換試試，你會不會失望。

來源

2016-10-10 07:10:34 thednp

SVG CSS轉換動畫，跨瀏覽器問題

回答

相關問題