按钮会因Chrome中同级元素上的动画而消失

Buttons disappear being affected by animation on sibling elements in Chrome

本文关键字：动画 消失 元素 Chrome 按钮      更新时间：2023-09-26

我正在尝试使用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>

对我来说，这看起来像是当前稳定的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>

相关文章：