css - iOS CSS 不透明度 + 可见性过渡

Question

在桌面浏览器 (JSFiddle) 中查看以下测试:

a {
  background: gray;
  display: block;
  margin: 100px;
  padding: 100px;
}
a span {
  opacity: 0;
  -webkit-transition: 0.5s;
  visibility: hidden;
}
a:hover span {
  opacity: 1;
  -webkit-transition: 0.5s;
  visibility: visible;
}

<a href="#">a <span>span</span></a>

您将鼠标悬停在 anchor 元素上，span 元素会像它应该的那样淡入。

现在通过 iOS 设备查看。结果:它什么都不做。

事实:

• 如果没有过渡属性，它会起作用。
• 如果 opacity 或 visibility 属性不存在，它会起作用。
• 没有为不透明度或可见性属性触发 webkitTransitionEnd 事件。

有什么解决方法吗？

Answer 1

通过对 transition 属性进行一些小的修改，这可以在 iOS 上运行。在 :hover 上，将 transition 限制为仅 opacity 属性，如下所示:

a:hover span {
    opacity:1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    visibility:visible;
}​

同时 visibility is an animatable property ，iOS 实现中似乎存在错误。当您尝试转换 visibility 时，整个转换似乎并没有发生。如果您只是将过渡限制为 opacity，一切都会按预期进行。

要清楚:在您的 CSS 中保留 visibility 属性，如果您希望在 Mobile Safari 中正常工作，请不要尝试转换它。

作为引用，这是您更新的 fiddle ，我在 iPad 上测试过:

a {
  background: gray;
  display: block;
  margin: 100px;
  padding: 100px;
}
a span {
  opacity: 0;
  -webkit-transition: 0.5s;
  visibility: hidden;
}
a:hover span {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  visibility: visible;
}

<a href="#">a <span>span</span></a>