Düğmeler, Chrome

Question

'daki kardeş öğelerdeki animasyondan etkilenmeden kayboluyor CSS3'ü kullanarak basit bir 3D fotoğraf galerisini uygulamaya çalışıyorum. IE10 + tarayıcısında iyi çalışır, ancak en yeni sürüm kromunda, tıklandığında düğmenin kaybolduğu küçük bir hata vardır. Bunu nasıl düzelteceğimi söyleyen var mı? Şimdiden teşekkür ederim.

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

Bana göre bu akım kararlı Chrome (49.0.2623.110 m) bir hata gibi görünüyor. Kardeş elementler animasyondan etkilenir. Chrome Kanarya'da (şimdi 51.0.2694.0 olan) bunun yeniden üretmediğini unutmayın. Bir krom güncellemesini beklerken biraz çözüm bulabilirim. Ayrı bir <div> yılında Paketleme düğmeleri benim için çalıştı:

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>