IE瀏覽器動畫中使用calc計算方法不生效的坑

2021-09-23 14:13:17 字數 901 閱讀 8088

最近在寫乙個動畫效果時,在動畫中利用calc去計算元素的移動距離,在火狐和谷歌chrome下運動正常,效果很簡單:

示例**如下:

在動畫的keyframes幀中,使用到了calc方法去計算移動距離。目前效果很完美,but,開啟ie瀏覽器嘗試效果時,運動元素卻傻傻的定在那裡一動不動:

趕緊去檢視了下transform和calc的瀏覽器相容性:

我用的ie11,瀏覽器相容性沒毛病啊。但是為毛動畫中使用calc就不生效呢?

查了一些資料,有人說這是ie的乙個bug。。。

曲線救國式的編碼方式去實現想要的效果:

把上面的動畫定義**修改為;

@keyframes move

50%100%

}

即取消掉calc計算方法,利用translatex和translatey重新去定位偏移量;效果達成:

在此記錄一下ie瀏覽器下的這個坑,遇到相同問題的小夥伴可以參考該解決方案。

牛人使用IE瀏覽器

設定過程 1 把標準工具條去掉,然後把位址列拖到選單欄,盡量往左拖。3 把google工具條拖到選單欄,盡量往右拖,以便給位址輸入留出來足夠的可見空間。4 別的亂七八糟的工具條就堅決不要用了,然後鎖定工具欄。設定成這個樣子,首先是為了頁面瀏覽視窗有足夠大的可見區,方便瀏覽網頁。其次是為了把視窗上無關...

Mac上使用IE瀏覽器

我們都知道在mac上不能直接安裝ie瀏覽器,如果要在mac上使用ie瀏覽器,網上也有很多方法,比如安裝虛擬機器 通過安裝 crossover或使用wine來安裝ie 通過mac自帶的瀏覽器safari ie核心等,但我覺得目前比較好用的方法是通過安裝外掛程式,chrome有兩款可以相容ie核心的外掛...

在瀏覽器中使用GitHub

步驟1.建立儲存庫 1.點選頭像旁邊的加號,建立新倉庫 2.輸入倉庫名 3.倉庫說明 4.公共開源 私有 別看不見 收費 綜上所訴 1.點選create new file建立新檔案 或者點選那個鉛筆 或者點選藍色readme.md後再點選鉛筆 2.開始編輯 3.預覽修改 4.編輯完 成後 專案說明 ...