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>

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

现在通过 iOS 设备进行查看。 结果：什么都不做。

事实：

• 如果没有转换属性，它可以工作。
• 如果不存在 opacity 或 visibility 属性，它会起作用。
• 没有为 opacity 或 visibility 属性触发 webkitTransitionEnd 事件。

有什么解决办法吗？

Answer 1

只有过渡的不透明度很糟糕。

因为在 iPhone 上，您需要点击才能聚焦元素，这就是我解决问题的方法：

.mydiv {
        visibility:hidden;
        opacity: 0;
        transition: all 1s ease-out; 
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
}
.mydiv:hover {
            visibility:visible;
            opacity: 1;
}
.mydiv:active {
            -webkit-transition: opacity 1s ease-out;
}

我已将不透明度过渡添加到 :active。

通过这种方式，它适用于 Chrome、Firefox 和 iPhone（点击）上的所有过渡动画（考虑您想要将动画应用于高度或其他东西）。

感谢 Grezzo 和 Michael Martin-Smucker 发现不透明度过渡。

（复制/粘贴我来自CSS animation visibility: visible; works on Chrome and Safari, but not on iOS的回复）

Answer 2

通过对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，一切都会按预期进行。

明确一点：将 visibility 属性保留在您的 CSS 中，如果您希望在 Mobile Safari 中运行，请不要尝试转换它。

作为参考，这是我在 iPad 上测试的更新后的 fiddle：

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>