IE /邊緣CSS3過渡不與後臺位置屬性

我知道我在談論IE，但我認爲transition屬性已修復更新（Edge？）版本。IE /邊緣CSS3過渡不與後臺位置屬性

我想過渡元素的background-position（見下面的演示），但不管是什麼原因，它不是在IE工作...：' - （

在下面的演示中，‘點擊我’按鈕應突出相鄰的文本，但不是那麼的IE瀏覽器。

如果選中「切換顯示」按鈕，你會看到背景顏色顯示出來（當然，轉型後），因爲切換display:none是迫使重繪。我知道background-size可能不是transition - 在IE中，但是這會影響background-position上的單個轉換屬性嗎？ lor從左到右過渡（請參閱除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>

來源

2017-04-04 mfink

哪個版本的IE？在IE 10中，轉換不起作用。 – Rob

移動的過渡性質的第一套，所以它看起來是這樣的：

.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/

來源

2017-04-04 19:05:09 Kelly

謝謝，但這似乎不能解決它對我來說，你可以複製我的代碼片段到你的答案和更新？此外，要回原來的狀態，當我不想轉型，這就是爲什麼我有'轉變：第一個CSS塊none'。 – mfink

你說的「IE邊緣」是什麼意思？哪有這回事。 – Rob

我的意思是，海報問：「我知道我說的是IE瀏覽器，但我認爲過渡性質被定格在更近（邊緣？）的版本。」 – Kelly

IE /邊緣CSS3過渡不與後臺位置屬性

回答

相關問題