Schaltflächen verschwinden durch Animation auf Geschwisterelemente in Chrome

Question

Ich versuche, eine einfache 3D-Fotogalerie mit CSS3 zu implementieren. Es funktioniert gut auf dem IE10 + Browser, aber es hat einen kleinen Fehler auf der neuesten Version Chrom, dass die Schaltfläche verschwunden ist, wenn es geklickt wird. Kann mir jemand sagen, wie ich das beheben kann? Vielen Dank im Voraus.

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

Für mich sieht das wie ein Bug in der aktuellen stabilen Chrome (49.0.2623.110 m). Geschwisterelemente werden von der Animation beeinflusst. Beachten Sie, dass dies in Chrome Canary (jetzt 51.0.2694.0) nicht reproduziert wird. Ich denke, während Sie auf ein Chrome-Update warten, können Sie eine Abhilfe finden. Wrapping-Schaltflächen in einer separaten <div> für mich gearbeitet:

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>