IE 10 + 11：calc（）を使用したCSSトランジションが機能しない

Question

CSSトランジションを使用して、マウスオーバー時に右から左にコンテナをアニメーション化しています。これは、Internet Explorerを除くすべてのブラウザで正常に動作します。理由は、私のCSS左のプロパティでcalc（）を使用している（そして使用する必要がある）ためです。 Live Demo

CSSは次のようになります：

div { 
    background: red; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    top: 100px; 
    left: 90%; 
    -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); 
    -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); 
    -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); 
    transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); 
} 
div.translate-less { 
    left: calc(90% - 4rem) 
} 

私はjQueryを使ってマウスオーバーでクラス.translateレス追加してい：

$(document) 
.on('mouseenter', 'div', function(){ 
    $(this).addClass('translate-less') 
}) 
.on('mouseleave', 'div', function(){ 
    $('div').removeClass('translate-less'); 
}) 

は、私はここでライブデモを作成しました

今、Internet Explorerでスムーズに移行したいと考えています。そのためには、これらの特定のブラウザのcalc（）を削除し、left: 85%;のようなルールを追加します。しかし、IE 10と11にはdropped support for conditional commentsがあり、これらのブラウザを特にターゲットにする方法はないようです。 IE 10は-ms-high-contrast-hackでターゲティングできますが、IE 11ではターゲティングできません。私はuse JavaScriptにブラウザを検出したくないので、これはCSSのハックを使用するよりもハッキリと思われるからです。

助けが必要ですか？前もって感謝します！

Answer 1

transform: translateX()は、回避策を提供できます。 、状況に応じた変換を使用して、右のプロパティが良いかもしれない：http://jsfiddle.net/xV84Z/1/：

right: 10%; 
transform: translateX(-4rem); 

ここでは、スクリプトの修正版です。

また、あなたが（理由a bugの）IEでtranslateX()内calc()を使用することはできませんが、あなたは、変換に複数のtranslateX() Sを適用することができます。

/* This */ 
transform: translateX(90%) translateX(-4rem); 
/* is equivalent to this */ 
transform: translateX(calc(90% - 4rem)); 

（ただし、この場合は90％が意味