iOS CSS 不透明度 + 可见性过渡

Posted 2023-03-06

【中文标题】iOS CSS 不透明度 + 可见性过渡

【英文标题】：iOS CSS opacity + visibility transition

【发布时间】：2011-11-24 19:37:36

【问题描述】：

在桌面浏览器 (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 设备进行查看。 结果：什么都不做。

事实：

如果没有转换属性，它可以工作。 如果不存在 opacity 或 visibility 属性，它会起作用。 没有为 opacity 或 visibility 属性触发 webkitTransitionEnd 事件。

有什么解决办法吗？

【问题讨论】：

您是否考虑过 iOS 设备上的指针丢失问题？没有悬停。

其实有。测试（没有可见性属性）：jsfiddle.net/jrpSJ/1

@ott 虽然不是真正的悬停，但单击假定并触发 iOS 设备上的 css:hover。

webarnes.ca/2012/04/mobile-safari-bugs-so-far - 似乎是一个错误。

嗨@Dan，你能为这个声明提供参考吗？我一直想知道在 iOS 上使用 CSS:hover。那么安卓呢？谢谢！

【参考方案1】：

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

因为在 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的回复）

【讨论】：

+1，这是一个聪明的解决方案，可以让这个骇人听闻的“修复”只影响触摸设备。

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

【参考方案2】：

通过对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>

【讨论】：

可见性属性对于可访问性很重要。不透明度在视觉上隐藏了元素，而可见性也为屏幕阅读器隐藏了它。

对，我不是建议你摆脱visibility，只是你不要尝试transition它（无论如何这是不可能的）。

@MichaelMartin-Smucker 你是个天才！我使用您的解决方案解决了我遇到的类似问题：***.com/questions/10736478/…。我已经回答了我自己的问题（并在此处引用了您的答案），但我不确定我对其工作原理的解释是否 100% 正确，您能否检查一下并添加评论或提交替代答案，如果我有问题?非常感谢。

实际上，'visibility' 是一个有效的动画属性。我用它来帮助使一些转换更容易访问。 w3.org/TR/css3-transitions/#animatable-properties

@ChrisB 谢谢，我已经更新了我的答案。出于好奇，转换 visibility 是否有可访问性优势（而不是仅转换 opacity 并简单地切换 visibility）？