按钮消失受Chrome中兄弟元素的动画影响

Question

我正在尝试使用CSS3实现一个简单的3D照片库。它在IE10 +浏览器上运行良好，但它在最新版本的chrome上有一个小错误，按钮在点击时消失了。谁能告诉我如何解决这个问题？提前谢谢。

window.onload=function(){
  var oWrap=document.getElementById('wrap');
  var oImgs=oWrap.getElementsByTagName('img');
  var oBtns=oWrap.getElementsByTagName('input');
  var iNow=0;
  oBtns[0].onclick=function(){

    oImgs[iNow].style.WebkitAnimation='1s hide';
    oImgs[iNow].className='';
    if (iNow<=0) {
      iNow=oImgs.length-1;
    }
    else{
      iNow--;
    }
    oImgs[iNow].style.WebkitAnimation='1s show';
    oImgs[iNow].className='active';

  };

  oBtns[1].onclick=function(){
    oImgs[iNow].style.WebkitAnimation='1s hide';
    oImgs[iNow].className='';
    if (iNow>=oImgs.length-1) {
      iNow=0;
    }
    else{
      iNow++;
    }

    oImgs[iNow].style.WebkitAnimation='1s show';
    oImgs[iNow].className='active';
  };
};

*{
  margin: 0;
  padding: 0;
}
@-webkit-keyFrames show{
  0%{
    -webkit-transform:rotateX(180deg);
    opacity: 0;

  }
  100%{
    -webkit-transform:rotateX(0deg);
    opacity: 1;
  }
}
@-webkit-keyFrames hide{
  0%{
    -webkit-transform:rotateX(0deg);
    opacity: 1;
  }
  100%{
    -webkit-transform:rotateX(-180deg);
    opacity: 0;
  }
}

#wrap{
  width: 400px;
  height: 300px;
  position: relative;
  margin: 100px auto;
  -webkit-perspective:800px;
}
img{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-style:preserve-3d;
  -webkit-transform-origin:bottom;
  -webkit-transform:rotateX(180deg);
  opacity: 0;
}

input{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #fff;
  font:20px/40px arial;
  text-align: center;
  position: absolute;
  background: #000;
}

#wrap input:nth-of-type(1){
  left: -200px;
  top: 200px;

}
#wrap input:nth-of-type(2){
  right: -200px;
  top:200px;

}
.active{
  -webkit-transform:rotateX(0deg);
  opacity: 1;
}

<div id="wrap">
  <img src="img/1.jpg" class="active" />
  <img src="img/2.jpg"/>
  <img src="img/3.jpg"/>
  <img src="img/4.jpg"/>
  <img src="img/5.jpg"/>
  <input type="button" value="Previous" />
  <input type="button" value="Next" />
</div>

Answer 1

对我来说，这看起来像当前稳定的Chrome（49.0.2623.110米）中的一个错误。同级元素受动画影响。请注意，在Chrome Canary（现在是51.0.2694.0）中，这不会重现。我认为在等待Chrome更新时，您可以找到一些解决方法。在单独的<div>中包含按钮为我工作：

window.onload=function(){
  var oWrap=document.getElementById('wrap');
  var oImgs=oWrap.getElementsByTagName('img');
  var oWrap2=document.getElementById('wrap2');
  var oBtns=oWrap2.getElementsByTagName('input');
  var iNow=0;
  oBtns[0].onclick=function(){

    oImgs[iNow].style.WebkitAnimation='1s hide';
    oImgs[iNow].className='';
    if (iNow<=0) {
      iNow=oImgs.length-1;
    }
    else{
      iNow--;
    }
    oImgs[iNow].style.WebkitAnimation='1s show';
    oImgs[iNow].className='active';

  };

  oBtns[1].onclick=function(){
    oImgs[iNow].style.WebkitAnimation='1s hide';
    oImgs[iNow].className='';
    if (iNow>=oImgs.length-1) {
      iNow=0;
    }
    else{
      iNow++;
    }

    oImgs[iNow].style.WebkitAnimation='1s show';
    oImgs[iNow].className='active';
  };
};

*{
  margin: 0;
  padding: 0;
}
@-webkit-keyFrames show{
  0%{
    -webkit-transform:rotateX(180deg);
    opacity: 0;

  }
  100%{
    -webkit-transform:rotateX(0deg);
    opacity: 1;
  }
}
@-webkit-keyFrames hide{
  0%{
    -webkit-transform:rotateX(0deg);
    opacity: 1;
  }
  100%{
    -webkit-transform:rotateX(-180deg);
    opacity: 0;
  }
}

#wrap, #wrap2{
  width: 400px;
  height: 300px;
  top: 0;
  position: relative;
  margin: 100px auto;
  -webkit-perspective:800px;
}
 #wrap2{
   margin-top: -400px;
 }
img{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-style:preserve-3d;
  -webkit-transform-origin:bottom;
  -webkit-transform:rotateX(180deg);
  opacity: 0;
}

input{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #fff;
  font:20px/40px arial;
  text-align: center;
  position: absolute;
  background: #000;
}

#wrap input:nth-of-type(1), #wrap2 input:nth-of-type(1){
  left: -200px;
  top: 200px;
}
 #wrap input:nth-of-type(2), #wrap2 input:nth-of-type(2){
  right: -200px;
  top:200px;
}
 
.active{
  -webkit-transform:rotateX(0deg);
  opacity: 1;
}

<div id="wrap">
  <img src="img/1.jpg" class="active" />
  <img src="img/2.jpg"/>
  <img src="img/3.jpg"/>
  <img src="img/4.jpg"/>
  <img src="img/5.jpg"/>
</div>
<div id="wrap2">
  <input type="button" value="Previous" />
  <input type="button" value="Next" />
</div>