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>

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

现在通过 iOS 设备查看一下。 结果：什么也没做。

事实：

• 如果没有过渡属性，它就可以工作。
• 如果不透明度或可见性属性不存在，它就可以工作。
• 不透明度或可见性属性不会触发 webkitTransitionEnd 事件。

有什么解决方法吗？

Answer 1

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

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

While 可见性是一个可动画属性，似乎有一个错误iOS 实现。当您尝试转换可见性时，整个转换似乎并未发生。如果您只是将过渡限制为不透明度，事情就会按预期进行。

需要明确：将 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>

Answer 2

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

由于在 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 动画可见性：可见；适用于 Chrome 和 Safari，但不适用于 iOS）