CSSの移行が動作しない

Question

私はボタンクリックの移行が発生するシナリオを持っています。

これは適用されたトランジションです。クロムブラウザではうまくいきましたが、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

Answer 1

は、IE11は、その値のいずれかまたは両方がcalcを使用して設定されている場合プロパティにtransitionを適用する問題を有しています。

回避策の1つは、transformを使用して計算の2番目の値を設定することですが、結果が目的のアニメーションと完全に一致しないことがあります。ここで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>

Answer 2

互換性表によれば、プレフィックス-ms-を使用する必要はありません。

クローム：4.0使用のための26.0のための接頭辞なし-webkit-

IE：10.0

Mozillaのための接頭辞なし：4.0使用のための16.0のための接頭辞なし-moz-

サファリ：6.1のための接頭辞なし3.1使用の場合-webkit-

オペラ12.1 10.5用-o-

Answer 3

あなたがcalc()を使用するためです（Known issuesタブを参照してください）：

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>

：

IE11は、CALCで設定した値（）

この例では、作品の移行をサポートしていません。

0123別の答えで述べたよう

JSFiddle