3

在 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永远不会再次显示。

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

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

4

2 回答 2

4

在 SO: iOS CSS opacity + visibility transition上找到这个问题后，我终于找到了解决方案。

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

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

于 2012-05-24T12:44:59.623 回答
0

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

因为在 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 发现了不透明度过渡。

于 2013-02-24T23:17:11.317 回答