javascript - 受 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 m) 中的一个错误。兄弟元素会受到动画的影响。请注意，在 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>