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

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;
}​

虽然可见性是一个可动画的属性，但在iOS的实现中似乎存在一个bug。当您尝试转换visibility时，似乎整个转换不会发生。如果你只是限制你的过渡到opacity，事情就像预期的那样工作。

需要说明的是:将visibility属性保留在你的CSS中，如果你想让它在Mobile Safari中工作，就不要尝试过渡它。

作为参考，这是你更新的小提琴，我在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>

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动画可见性:可见;