CSS动画可见性：visible;适用于Chrome和Safari，但不适用于iOS [英] CSS animation visibility: visible; works on Chrome and Safari, but not on iOS

问题描述

在Chrome（WinXP上为19.0.1084.46 m）和Safari上（OS X 10.7.4上为5.1.7），这个小调 http://jsfiddle.net/Vppwm/ 作品;点击谷歌图像显示/隐藏绿色div，但当它加载到我的iPhone，和iPhone模拟器在xCode（通过使用直接页 http://jsfiddle.net/Vkpwm/show/ ），div永远不会再显示。

In Chrome (19.0.1084.46 m on WinXP) and Safari (5.1.7 on OS X 10.7.4), this fiddle http://jsfiddle.net/Vkpwm/ works; clicking on the google image shows/hides the green div, but when loading it on my iPhone, and on the iPhone simulator in xCode (by using the direct page http://jsfiddle.net/Vkpwm/show/), the div never gets shown again.

删除行-webkit-transition：0.5s;从css使它工作，但显然打破了动画。删除visibility：hidden;行也使得它工作，但意味着div仍然在那里和事件被触发（例如，警报被触发，即使div是完全不透明的）。

Removing the line "-webkit-transition: 0.5s;" from the css makes it work, but obviously breaks the animation. Removing the line "visibility: hidden;" also makes it work, but means that the div is still there and events get fired on it (e.g. the alert is fired even though the div is fully opaque).

推荐答案

我终于找到了一个iOS错误，解决方案：在 iOS CSS opacity + visibility change 。

I finally found a solution after finding this question on SO: iOS CSS opacity + visibility transition.

我必须在设置可见性时应用转换到透明度：visible，但将其应用于visiblity：hidden，以便在隐藏之前使不透明度生效。

I had to apply the transition to opacity only when setting visibility: visible, but leave it applied to visiblity: hidden in order to make the opacity animate before it got hidden.

我的更新和工作小提示是 http://jsfiddle.net/ vkpwm / 3 / 。

My updated and working fiddle is http://jsfiddle.net/Vkpwm/3/.

这篇关于CSS动画可见性：visible;适用于Chrome和Safari，但不适用于iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！