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>

将鼠标悬停在锚元素上，并且span元素将按照应有的方式淡入。

现在通过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;
}

虽然visibility is an animatable property，但iOS实施中似乎存在错误。当您尝试转换visibility时，似乎整个转换都不会发生。如果您只是将转换限制为opacity，则事情会按预期进行。

要明确：将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 animation visibility: visible; works on Chrome and Safari, but not on iOS复制/粘贴我的回复）

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

2 个答案: