IE / Edge CSS3 过渡不适用于背景位置属性

Question

我知道我在谈论 IE，但我认为 transition 属性已在较新的（Edge？）版本中修复。

我正在尝试转换元素的 background-position（请参阅下面的演示）但出于某种原因它在 IE 中无法正常工作...:'-(

在下面的演示中，"Click Me" 按钮应该突出显示相邻的文本，但对于 IE 不是这样。

如果切换 "Toggle Display" 按钮，您会看到背景颜色出现（当然是在转换之后），因为切换 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>

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/

IE / Edge CSS3 过渡不适用于背景位置属性

IE / Edge CSS3 Transitions not working with background-position property

css

internet-explorer

css-transitions

microsoft-edge

IE / Edge CSS3 过渡不适用于背景位置 属性

IE / Edge CSS3 Transitions not working with background-position property

css

internet-explorer

css-transitions

microsoft-edge

IE / Edge CSS3 过渡不适用于背景位置属性