IE/에지 CSS3 전환 배경-position 속성

Question

내가 IE에 대해서 이야기하고하지만 난transition 속성을 최근에 수정되었습니다 생각 알고 (에지?) 버전에서 작동하지 않습니다.

나는 요소의 background-position (데모 아래 참조)하지만 어떤 이유가 ... IE에서 작동하지 않습니다를 전환하기 위해 노력하고있어 : '- (

아래의 데모에서

는 "나를 클릭" 버튼은 인접한 텍스트를 강조 표시해야하지만 IE에서는 그렇지 않습니다.

토글 display:none이 다시 칠하기 때문에 토글 디스플레이 버튼을 토글하면 (전환 전환 후) 배경색이 표시됩니다 . 내가 background-size은 transition - 가능하지 않을 수 있습니다 알아요?하지만 내 단일 전환 속성에 영향을 않습니다 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/