html - Css3 过渡不适用于 ios

Question

在 PC 和 Android 设备上我的转换代码可以工作，但在 iOS 设备上它不会工作。我只使用 html 和 css。

/***** BOX 3 *****/
#box3 {
height:240px;
width:198px;
border:1px solid #dedede;
background-color:#fcfcfc;
position:relative;
overflow:hidden;
float:left;
margin-right:23px;
margin-bottom:23px;
opacity:1;
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}

#box3:hover {
-webkit-box-shadow: 0 0 3px #999;
-moz-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999;
}

#box3 .bgbox3 {
background:url(images/top-seller-3.jpg) 50% 10% no-repeat;
position:absolute;
height:240px;
width:198px;
opacity:1;
-webkit-transition: all .2s ease-out-in;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

#box3:hover .bgbox3 {
opacity:0.3;
}

#box3 a, #box3 a:hover {
text-decoration: none;
}

.imagebox3 {
background: url(images/bestellen.jpg);
background-repeat:no-repeat;
position:absolute;
height:40px;
width:40px;
opacity:0;
margin-top:80px;
margin-left:10px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
}

#box3:hover .imagebox3 {
opacity:1;
-webkit-transform:translate(45px ,0);
transform:translate(45px ,0);
}

非常感谢 问候帖木儿

Answer 1

要快速修复，请尝试使用 :active选择器以及 :focus ？

最可靠的方法是将这些属性放入并去掉 CSS 部分:

<div id="box3" ontouchstart="this.setAttribute('style','-webkit-box-shadow:0 0 3px #999;')" ontouchend="this.setAttribute('style','')">

Ontouchstart是onmousedown的官方iOS/Android/webkit版本.它实际上会在有人触摸屏幕时立即触发，而鼠标事件具有长按检测延迟。

另一件事，你可以设置 this.style.boxShadow直接代替，但根据经验，阴影不喜欢以编程方式设置时呈现，因此从头开始设置属性会强制重新绘制。

希望这对您有所帮助!