学习日记--苹果不兼容hover的研究

        现在我是web初学者，最近在随心的研究关于h5的各种知识。昨天遇到一个奇怪的问题，问题是这样的，有个点击图片出现从左边切入元素的动画，在PC端没有问题，在安卓手机上也没问题，在苹果机上偏偏出了事儿（苹果机在苹果4和苹果6上测试的）：点击图片毫无反应，无法出现动画。这个问题让我足足找了半天才找到原因，原来是CSS有问题，见下面的代码。

部分html代码：

<div class="col_1_of_4 span_1_of_4">
    <a class="b-link-stripe b-animate-go  thickbox">
        <img src="images/p1.jpg" class="img-responsive" alt=""/>
        <div class="b-wrapper">
             <h2 class="b-animate b-from-left b-delay03 ">
                 <img src="images/p_logo.png" class="img-responsive-2" alt="" />
                 <span class="span-responsive-2">content</span>
                 <button class="btn-responsive-2">content</button>
                 <label> <i class="heart"> </i>21</label>
             </h2>
        </div>
    </a>
</div>

部分css代码：

.b-animate{
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	visibility: hidden;
	font-size:1.1em;
	font-weight:700;
	transition: transform 0.5s;

.b-from-left{
	position: relative;
	transform: translate3d(-100%,-100%,0);
	background-size: 100% 100%;
	top: 0px;
	margin: 0;
	min-height:312px;
}

.b-animate-go:hover .b-animate{
	visibility:visible;
}

.b-animate-go:hover .b-from-left{
	transform: translate3d(0,0,0);
}

注：b-animate与b-form-left是同一个元素的类。

        注意后面两段css，出现了b-animate-go:hover，经过查询得知，hover选择器用于选择鼠标指针浮动在上面的元素，它不是用来做手机端的。原因出在这里。

      经过自己的思考，想出了条解决的思路：给需要动画的元素绑定一个点击事件，通过点击来改变CSS，来显示点击后，图片切入元素；并且每当在点击下一个图片的时候，上一个图片切入的元素消失。

1、先把上面CSS中的两个带有hover的代码注销；

2、在需要动画的元素上添加点击事件并增加一个id；

<div class="col_1_of_4 span_1_of_4">
    <a class="b-link-stripe b-animate-go  thickbox" id="b-animate-go1" onclick="setAnimate(1)" >
	<img src="images/p1.jpg" class="img-responsive" alt=""/>
	<div class="b-wrapper">
	    <h2 class="b-animate b-from-left b-delay03 ">
		<img src="images/p_logo.png" class="img-responsive-2" alt="" />
		<span class="span-responsive-2">content</span>
		<button class="btn-responsive-2">content</button>
		<label> <i class="heart"> </i>21</label>
	    </h2>
	</div>
    </a>
</div>

3、编写点击事件方法；（注：K代表上一个点击图片的位置）

var k=0;
function setAnimate(i){
    document.getElementById("b-animate"+i).style.cssText="visibility:visible;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)";
    if(k!=0){
	if(k!=i){
	    document.getElementById("b-animate"+k).style.cssText="transform:translate3d(-100%,0,0);-webkit-transform:translate3d(-100%,0,0);visibility:hidden;";
	}
    }
    k=i;
}

    这个已经经过测试了，但是有一个问题，在苹果4上面点击图片的动画，会遇到延迟，首次点击延迟2秒，非首次延迟大概1.2秒。但是在苹果6上面没有这个问题，我想会不会是苹果4兼容性不好的原因。
    此外我还在想另外一条思路，通过点击图片用JS在元素上添加类名从而改变CSS的思路；还没测试在试验中···

大概思路是：

1、在刚才有hover的css代码中，去掉hover，并添加一个active类

.b-animate-go.active .b-from-left .b-animate{
	visibility:visible;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}

2、在刚才添加点击事件的元素上，添加点击事件在元素上添加类名

function setClassName(i){
    document.getElementById("b-animate-go"+i).classList.add('active');
}