MS Edge：CSS3 过渡在 link 内的元素中未按预期工作

Question

我有一个 link，里面有一个元素（我们称它为 Bob）。 Bob 是 link 的明星，所以他想闪耀一点不同。

link 有一些 CSS3 过渡以创建淡入淡出效果。 Bob还有淡化效果，所以他还是可以成为link.

的闪亮元素

重要的一点是 :hover 与容器相关（在示例中，div），我需要它。

它在 Firefox、Chrome 和 IE 中运行良好，但 Microsoft Edge 不喜欢 Bob 的闪耀方式。在过渡期间，鲍勃就消失了，我不知道他去了哪里。

这是一个例子HTML:

<div>
  <a href="#1">
    <span class="Bob">Bright like a diamond!</span>
    <p>Random text</p>
  </a>

  <a href="#2">Other random stuff, who cares...</a>
</div>

:hover 转换在 div 上，然后 a 和 Bob 都有转换。相关的 CSS 很简单，像这样：

div:hover .Bob { transition: all 0.5s ease 0s; }
.Bob { transition: all 0.5s ease 0s; }
div:hover a { transition: all 0.5s ease 0s; }
a { transition: all 0.5s ease 0s; }

然后他们只是有不同的颜色，所以你可以看到淡入淡出的动画

这是一个 JSFiddle，因此您可以认识 Bob： https://jsfiddle.net/Cthulhu/9vv7v6gd/

如果您在 MS Edge 中对其进行测试，您将看到 Bob 如何在转换过程中消失，我们不希望出现这种情况。如果你改变 Bob 和 a 之间的转换时间，它会变得更奇怪，但让我们暂时保持简单。

有什么想法吗？

Answer 1

我今天遇到了同样的问题。我通过更具体的转换解决了它属性

{ transition: all 0.5s ease 0s; }

改为

{ transition: color 0.5s ease 0s; }

Answer 2

解决此问题的方法是将过渡结果添加到元素。

div:hover a {
    /* for example, if blue text was the desired transition. */
    color: blue;
}

Answer 3

现在是 2019 年。问题已由 Microsoft 解决，Edge 在这种情况下的行为与任何其他浏览器一样。

案件结案。

MS Edge：CSS3 过渡在 link 内的元素中未按预期工作

MS Edge: CSS3 transitions not working as expected in element inside link

css

animation

css-transitions

microsoft-edge