IE/Edge CSS3トランジションがバックグラウンドポジションのプロパティで動作しない

Question

私はIEについて話していると知っていますが、はtransitionというより最近の（Edge？）バージョンで修正されています。

...私は要素のbackground-positionを移行しようとしている（デモ下記参照）が、何らかの理由で、それはIEで働いていない： ' - （下のデモで

、 『私をクリックしてください』ボタンは隣接するテキストをハイライト表示する必要がありますが、IEではそうではありません

トグルdisplay:noneが再ペイントを強制しているため、「トグル表示」ボタンをトグルすると、背景色が表示されます私はbackground-sizeがtransition - 可能IEではないかもしれないが知っているが、background-positionの私の単一の移行プロパティに影響を与えますか？左側から右側への移行（IE以外のブラウザでもデモを見たい）

ありがとうございます！

/** JS only to facilitate the test and trigger the CSS on button click **/ 
 
var myHighlighter = document.querySelector('.button'); 
 
var myToggle = document.querySelector('.toggle'); 
 

 
myHighlighter.addEventListener('click', press) 
 
// toggling `display:none` just forces a repaint 
 
myToggle.addEventListener('click', toggle); 
 

 
function press(e) { 
 
    var newState = (e.target.getAttribute('aria-pressed')!=="true"); 
 
    e.target.setAttribute('aria-pressed', newState); 
 
} 
 

 
function toggle(e) { 
 
    var isToggled = (e.target.previousElementSibling.getAttribute('style')) 
 
    if (isToggled) { 
 
    e.target.previousElementSibling.removeAttribute('style'); 
 
    } else { 
 
    e.target.previousElementSibling.setAttribute('style', 'display:none;'); 
 
    } 
 
}

/* conditional CSS for transition based on presence of `aria-pressed="true"` attribute */ 
 
.button + .text { 
 
    background: linear-gradient(to right, orange 50%, transparent 50%) no-repeat; 
 
    background-position:right bottom; 
 
    background-size: 200% 100%; 
 
    transition: none; 
 
} 
 

 
.button[aria-pressed="true"] + .text { 
 
    background-position: left bottom; 
 
    transition: background-position .5s linear; 
 
}

<div class="wrapper"> 
 
    <button type="button" 
 
     class="button" 
 
     aria-pressed="false"> 
 
     Click Me 
 
    </button> 
 

 
    <span class="text">IE won't transition the background-position (color highlighting) initially without toggleing the display (repaint)</span> 
 
    <button class="toggle">Toggle Display</button> 
 
    
 
</div>

Answer 1

それは次のようになりますので、最初のセットへの移行のプロパティを移動し

：

.button + .text { 
background: linear-gradient(to right, orange 50%, transparent 50%) no-repeat; 
background-position:right bottom; 
background-size: 200% 100%; 
transition: background-position .5s linear; 
} 

.button[aria-pressed="true"] + .text { 
background-position: left bottom; 
} 

申し訳ありませんが、私は私にあなたのスニペットを追加する方法を見つけ出すことができませんでした既存の回答...

CSSに追加：

.text { 
display:block; 
} 

これはIEで動作しました。ここにあなたの編集コードは次のとおりです： https://jsfiddle.net/kellyking/2zLhz8t6/2/