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

问题描述

请在桌面浏览器中查看以下测试（ JSFiddle ）：

  a {background：gray;显示：block; margin：100px; padding：100px;} 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>  

你将鼠标悬停在锚点元素和跨度元素上，就像它应该一样。

现在通过iOS设备查看。

• 如果


• 如果不透明度或可见性属性不存在，则其工作。


• 没有webkitTransitionEnd事件

是否有解决方法？

解决方案

只有透明度的透明度太差。

在iPhone上，你需要点击才能聚焦元素。修正了我的问题：

  .mydiv {
 visibility： 
 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动画可见性：visible ;适用于Chrome和Safari，但不适用于iOS ）

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>

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

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

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.

Is there any workaround?

解决方案

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:

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

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

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

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

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