边缘 40/15 opacity/visibility 转换事件传播（闪烁）错误？

Question

在旧版本的 Edge 中，所需的过渡效果可以正常工作。我只是在调用其父项的悬停事件时通过将 opacity/visibility 转换为 CSS 来为 div 设置动画。

//LESS
&:hover .inside{
  //part that matters:
  visibility: visible;
  opacity: 1.0;
  transition-delay:0s;
}
.inside{
  //part that matters:
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 1s,opacity 1s ease;
}
//Pug
.wrapper
  .button text
    .inside more text

问题。
在 Chrome、IE 11 和 Edge 25 中，过渡是一致且正确的。但是，如果我在过渡自然完成之前悬停或离开按钮，过渡事件似乎会堆积起来并使不透明度来回跳跃。
这是一个例子：https://codepen.io/vtsells/pen/RZjLYP

这是一个错误还是我遗漏了什么？我发现旧版本的 Edge 可以正常工作很奇怪

Answer 1

您的 transition-delay:0s 导致了问题。将它设置为一个非常低的值应该会给你一个很好的结果：transition-delay: 0.01s

这是你的作品codepen。

边缘 40/15 opacity/visibility 转换事件传播（闪烁）错误？

Edge 40/15 opacity/visibility transition event propagation (flickering) bug?

html

css

less

css-transitions

microsoft-edge