CSS动画可见性:可见;适用于Chrome和Safari，但不适用于iOS

Question

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

从css中删除行"-webkit-transition： 0.5s;"可以工作，但显然会破坏动画。删除行"可见性：隐藏;"也可以使其工作，但意味着div 仍然存在并且事件会在其上触发（例如，即使div 完全不透明，也会触发警报）。

这是一个iOS错误，还是我做错了桌面浏览器能够解决的问题？

Answer 1

在 SO 上找到这个问题后，我终于找到了解决方案：iOS CSS 不透明度 + 可见性转换。

只有在设置可见性：可见时，我才必须将过渡应用于不透明度，但将其应用于可见性：隐藏，以使不透明度在隐藏之前动画化。

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

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发现了不透明度的转变。