iOS CSS 不透明度 + 可见性过渡 [英] iOS CSS opacity + visibility transition

问题描述

在桌面浏览器(JSFiddle)中查看以下测试:

Take a look at the following test in a desktop browser (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 元素会像它应该的那样淡入.

You hover over the anchor element and the span element fades in like it should.

现在通过 iOS 设备查看.结果:它什么都不做.

Now take a look via an iOS device. Result: it does nothing.

事实:

• 如果没有 transition 属性，它会起作用.
• 如果不透明度或可见性属性不存在，则它有效.
• 没有为不透明度或可见性属性触发 webkitTransitionEnd 事件.

有什么解决办法吗?

推荐答案

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

Only opacity on transition sucks.

因为在 iPhone 上你需要点击才能聚焦一个元素，这就是我解决我的问题的方法:

Since that on iPhone you need to tap in order to focus an element this is how I've fixed my problem:

.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.

I've added the opacity transition to :active.

这种方式适用于 Chrome、Firefox 和 iPhone(点击)上的所有过渡动画(考虑到您想将动画应用于高度或其他内容).

This way it works with all transition animation (consider that you want to apply animation to height or something else) on Chrome, Firefox and iPhone (on tap).

感谢 Grezzo 和 Michael Martin-Smucker 发现不透明度过渡.

Thanks to Grezzo and Michael Martin-Smucker for spotting out about the opacity transition.

(复制/粘贴我来自 CSS 动画可见性:可见；适用于 Chrome 和 Safari，但不适用于 iOS)

(copy/paste of my response from CSS animation visibility: visible; works on Chrome and Safari, but not on iOS)

这篇关于iOS CSS 不透明度 + 可见性过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！