iOS CSS 不透明度 + 可见性过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7548833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS CSS opacity + visibility transition
提问by DADU
Take a look at the following test in a desktop browser (JSFiddle):
在桌面浏览器（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>You hover over the anchor element and the span element fades in like it should.
你将鼠标悬停在锚元素上，span 元素会像它应该的那样淡入。
Now take a look via an iOS device. Result: it does nothing.
现在通过 iOS 设备查看。结果：它什么都不做。
Facts:
事实：
- If the transition property is absent, it works.
- If either the opacity or visibility property is absent, it works.
- There is no webkitTransitionEnd event being fired for the opacity or visibility property.
- 如果没有 transition 属性，它会起作用。
- 如果不透明度或可见性属性不存在，则它起作用。
- 没有为不透明度或可见性属性触发 webkitTransitionEnd 事件。
Is there any workaround?
有什么解决方法吗？
回答by Michael Martin-Smucker
With some minor modifications to the transitionproperty, this can work on iOS. On :hover, limit the transitionto only the opacityproperty, like so:
对该transition属性进行一些小的修改，这可以在 iOS 上运行。On :hover，将 限制transition为仅opacity属性，如下所示：
a:hover span {
opacity:1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility:visible;
}?
While visibility is an animatable property, there seems to be a bug in the iOS implementation. When you try to transition visibility, it seems like the entire transition doesn't happen. If you simply limit your transition to opacity, things work as expected.
虽然可见性是一个可动画的属性，但 iOS 实现中似乎存在一个错误。当您尝试 transition 时visibility，似乎整个过渡都没有发生。如果您只是将转换限制为opacity，那么事情会按预期进行。
To be clear:Leave the visibilityproperty in your CSS, just don't try to transition it if you want things to work in Mobile Safari.
需要明确的是：将该visibility属性保留在您的 CSS 中，如果您希望在 Mobile Safari 中工作，请不要尝试转换它。
For reference, here's your updated fiddle, which I tested on an iPad:
作为参考，这是我在 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>回答by Sergiu
Only opacity on transition sucks.
只有过渡的不透明度很糟糕。
Since that on iPhone you need to tap in order to focus an element this is how I've fixed my problem:
因为在 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;
}
I've added the opacity transition to :active.
我已将不透明度过渡添加到 :active。
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).
通过这种方式，它适用于 Chrome、Firefox 和 iPhone（点击）上的所有过渡动画（考虑到您想将动画应用于高度或其他东西）。
Thanks to Grezzo and Michael Martin-Smucker for spotting out about the opacity transition.
感谢 Grezzo 和 Michael Martin-Smucker 发现不透明度过渡。
(copy/paste of my response from CSS animation visibility: visible; works on Chrome and Safari, but not on iOS)
（复制/粘贴我对CSS 动画可见性的响应：可见；适用于 Chrome 和 Safari，但不适用于 iOS）
