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过渡不与后台位置属性

回答

相关问题