Düğmeler, Chrome

'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.Düğmeler, 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>

kaynak

2016-03-30 Johnathan

, bir dahaki sefere kullanım stacksnippets veya jsfiddle kodunuzu göstermek için tıklayın. oyları veya yanlış cevapları kapatmaktan kaçınmak için iyi soruları formüle etmek için stackoverflow'un yardımını okumalısınız. İyi şanslar –

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>

kaynak

2016-03-30 10:15:53

Çok teşekkürler. Benim için de çalıştı. – Johnathan

cevap

İlgili konular