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设备.结果:它什么都不做.

事实:

• 如果没有过渡属性,它就可以工作.
• 如果不存在opacity或visibility属性,则可以正常工作.
• 没有为opacity或visibility属性触发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实现中似乎存在一个错误.当您尝试转换时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

只有转型的不透明性很糟糕.

从那以后你需要点击以便集中一个元素,这就是我解决问题的方法:

.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动画可见性复制/粘贴我的回复:可见;适用于Chrome和Safari,但不适用于iOS)