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

は私にとって、これは現在の安定したクロム（49.0.2623.110メートル）のバグのように見えます。兄弟要素はアニメーションの影響を受けます。 Chrome Canary（現在は51.0.2694.0）ではこれが再現されないことに注意してください。私はクロムの更新を待っている間、あなたはいくつかの回避策を見つけることができると思う。別の<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>