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

【问题标题】：Buttons disappear being affected by animation on sibling elements in Chrome按钮消失受到 Chrome 中兄弟元素动画的影响
【发布时间】：2016-07-18 03:45:43
【问题描述】：

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

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>

【问题讨论】：

请下次使用 stacksn-ps 或 jsfiddle 来展示您的代码。你必须阅读 stackoverflow 的帮助来制定好的问题，以避免关闭投票或错误的答案。祝你好运

标签： javascript css animation transform

【解决方案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>

【讨论】：