iOS CSS不透明度+可见性转换

在桌面浏览器（ JSFiddle ）中查看以下testing：

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> 

将鼠标hover在锚点元素上，span元素就会像应该那样淡入。

现在通过一个iOS设备来看看。 结果：它什么都没做。

事实：

• 如果转换属性不存在，则可以使用。
• 如果不透明或可视性属性不存在，则可以使用。
• 没有为不透明或可见性属性引发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上轻松使用所有的过渡animation（假设您想将animation应用于高度或其他内容）。

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

（从CSSanimation可见性复制/粘贴我的可见性：可见;适用于Chrome和Safari，但不适用于iOS ）

Answer 2

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

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

虽然可见性是一个animation的属性 ，但似乎有一个在iOS实现中的错误。 当您尝试转换visibility ，似乎整个转换不会发生。 如果你只是限制你的过渡到opacity ，事情按预期工作。

要清楚：在CSS中留下visibility属性，只是如果你想在移动Safari浏览器中工作，不要试图转换它。

作为参考，这里是您更新的小提琴 ，我在iPad上testing：

 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>