html - 边缘 40/15 不透明度/可见性过渡事件传播(闪烁)错误?

标签 html css less css-transitions microsoft-edge

在旧版本的 Edge 中,所需的过渡效果可以正常工作。 我只是在调用其父级的悬停事件时通过使用 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 可以正常工作很奇怪

最佳答案

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

这是你的工作 codepen .

关于html - 边缘 40/15 不透明度/可见性过渡事件传播(闪烁)错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45746774/

相关文章:

javascript - 如何搜索数组属性中的项目?

html - 如何在 HTML 邮件程序(HTML 电子邮件)中导入自定义字体

html - Bootstrap 标签没有包裹在 DIV 中?

css - 主线程上的同步 XMLHttpRequest 已弃用,因为它具有不利影响

css - 不同颜色的双边框

html - 单独的按钮 :active from parentDiv:Active

html - 如何获得彩色输入标签?

html - 嵌套网格中的最后一列总是在新行中

html - 制作灵活的 CSS 布局以在文本气球中显示用户评论时遇到麻烦

javascript - Bootstrap Container 和 Container Fluid 有问题