我知道我在谈论 IE,但我认为 transition
属性在较新的(Edge?)版本中已修复。
我正在尝试转换元素的 background-position
(请参阅下面的演示)但无论出于何种原因它在 IE 中不起作用...:'-(
在下面的演示中,“单击我”按钮应该突出显示相邻的文本,但 IE 不是这样。
如果您切换“切换显示”按钮,您会看到背景颜色出现(当然是在转换之后),因为切换 display:none
会强制重绘。我知道 background-size
在 IE 中可能无法 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>
最佳答案
将过渡属性移动到第一组,所以它看起来像这样:
.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/
关于css - IE/Edge CSS3 Transitions 不适用于 background-position 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43215357/