iOS CSS透明度+可见性过渡

Question

iOS CSS透明度+可见性过渡

10

请在桌面浏览器中查看以下测试 (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事件。

有任何解决方法吗？

- DADU

3

虽然不是真正的悬停，但在iOS设备上点击会触发CSS :hover效果。 - Dan

1

http://www.webarnes.ca/2012/04/mobile-safari-bugs-so-far/ - 看起来是一个bug。 - Anthony

嗨@Dan，你能提供一下这个说法的参考文献吗？我一直想知道在iOS上使用CSS:hover是否可行。那在安卓上呢？谢谢！ - tim peterson

@tim-peterson 没有参考，只是从个人测试中得出的结论，尽管悬停事件从未被触发，而且有点不稳定...你可以谷歌一些文章http://niteodesign.com/web-design/iphone-ipad-ios-and-the-css-hover-event/ - Dan

@Dan，我在iPhone上注意到悬停关闭很麻烦，大多数时候必须用力点击。谢谢你提供的链接，我想我会尽可能坚持使用click()。 - tim peterson

显示剩余3条评论

2个回答

9

只有在过渡中使用不透明度是不好的。

由于在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 复制/粘贴我的回复）

- Sergiu

+1，这是一个聪明的解决方案，使这个笨拙的“修复”只影响触摸设备。 - Michael Martin-Smucker

2

该漏洞（影响iOS ≤ 7）可以通过指定可见性转换的零持续时间（+正确的延迟）来修复：state1=opacity: 1; visibility: visible; transition: opacity 1s, visibility 0s; 和 state2=opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s;。 - mems

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Martin-Smucker · Accepted Answer

通过对 transition 属性进行一些小的修改，可以在 iOS 上运行。在 :hover 中，将 transition 限制在仅透明度属性上，像这样：

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

虽然visibility是一个可动画属性, 但在iOS实现中似乎存在一个bug。当您尝试过渡visibility时，似乎整个过渡都不会发生。如果您仅限制过渡到opacity，则一切正常。

明确一点：在CSS中保留visibility属性，只是如果您希望在移动Safari中正常工作，请不要尝试对其进行过渡。

供参考，这是您的更新的fiddle，我在iPad上进行了测试：

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>