Css轉換不起作用

我有一個場景，在按鈕點擊過渡應該發生。Css轉換不起作用

這些是應用的轉換。在Chrome瀏覽器中它運行良好，但在IE11中嘗試過渡時沒有得到應用。

我已經應用CSS象下面這樣：

div{ 
 
    width:100px; 
 
    height:100px; 
 
    background:red; 
 
    transition-property: right, left; 
 
    transition-duration: 2s; 
 
    -webkit-transition-property: right, left; /* Safari */ 
 
    -webkit-transition-duration: 2s; /* Safari */ 
 
    -ms-transition-property: right, left; /* Safari */ 
 
    -ms-transition-duration: 2s; /* Safari */ 
 
    position:absolute; 
 
    right:calc(100% - 100px); 
 
} 
 

 
div:hover{ 
 
    right:0px; 
 
}

<div></div>

任何幫助，將不勝感激。 DEMO

來源

2017-01-23 Shikha thakur

作爲另一個答覆中提到，IE11已經應用transition的財產，如果它的值中的一個或兩個使用calc集問題。

一種解決方法是使用transform設置計算的第二個值，但結果可能與您所需的動畫完全不匹配。請注意，此處translatex函數中使用的百分比與元素的寬度有關。

div{ 
 
    background:red; 
 
    height:100px; 
 
    width:100px; 
 
    position:absolute; 
 
    right:100%; 
 
    transform:translatex(100%); 
 
    transition-duration:2s; 
 
    transition-property:right,transform; 
 
} 
 
div:hover{ 
 
    right:0; 
 
    transform:translatex(0); 
 
}

<div></div>

來源

2017-01-23 16:15:04 Shaggy

-1

根據兼容性表，您不需要使用前綴-ms-。

鉻：沒有前綴26.0 4.0使用-webkit-

IE：無前綴10.0

Mozilla的：無前綴16.0 4.0使用-moz-

Safari中：沒有前綴爲6.1 for 3.1使用-webkit-

Opera 12.1 for 10.5 use -o-

來源

2017-01-23 10:36:03

但它不工作，即使我刪除-MS前綴 –

寫這一點，並檢查到頭部分：也嘗試在將代碼運行到瀏覽器之前清除緩存。 –

不，這不起作用 –

這是因爲你用calc()（見Known issues標籤）：

IE11不支持轉換（）與計算設定值

這個例子的工作原理：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    -webkit-transition-property: right, left; 
 
    -webkit-transition-duration: 2s; 
 
    -ms-transition-property: right, left; 
 
    -ms-transition-duration: 2s; 
 
    transition-property: right, left; 
 
    transition-duration: 2s; 
 
    position: absolute; 
 
    right: 80%; 
 
} 
 

 
div:hover { 
 
    right: 0; 
 
}

<div></div>

JSFiddle

來源

2017-01-23 12:38:57

Css轉換不起作用

回答

相關問題