Geçiş html öğeleriyle etkileşim kurulamıyor

Bu şey beni delirtiyor!Geçiş html öğeleriyle etkileşim kurulamıyor

Bir html sayfasında başka bir div içinde programlanmış olarak mutlak şekilde konumlandırılmış div'ler oluşturuyorum. Dış div, mousedown ve touchstart olayları için kayıtlıdır ve iç div, css3 geçişleri kullanılarak hareket etmeye başlar.

Tüm geçişler -WebKit-dönüşümü özelliğini etkiler.

Olay işleme hariç her şey yolunda gidiyor: Chrome ve Safari'de tüm etkinlikler dış div olay işleyicisinde yakalanıyor ancak olayın hedef özelliği nadiren kullandığım div değil!

Bir div geçişi bitirdiğinde, olay hedefi her zaman doğru olanıdır, ancak div'ler geçiş yaparken DEĞİLDİR. Bu bir hata mı ??? Bir şey mi eksik?

GÜNCELLEME:

şu örnek Burada

sorunu demostrates bir online örneğidir safari ve krom ile uyumludur: http://jsfiddle.net/qfn7F/4/

küreler ekranın üst kısmından olurken olsun ve dibine doğru hareket ediyor. Kullanıcı bir küre (duraklama olayı) tıkladığında, tıklanan kürenin ekrandan kayması gerekir.

container.addEventListener(onSelect, function() { 
    if (event.target.classList.contains("transition")) { 
     var tDiv = event.target; 
     var box = tDiv.getBoundingClientRect(); 
     var durationEase = "0.25s linear"; 
     tDiv.style.pointerEvents = "none"; 
     tDiv.style.webkitTransform = "translate3d(" + box.left + "px," + box.top + "px, 1px)"; 
     tDiv.style.opacity = 0; 
     tDiv.style.webkitTransition = "opacity " + durationEase; 
    } 
    event.preventDefault(); 
    event.stopPropagation(); 
}, false);

ANCAK olayın hedef NADİREN küreler bir tutarlı bir şekilde ekrandan kaybolur kalmamak kullanıcı, tıklandığında küredir: Burada

küreler ile etkileşimlerini ele koddur.

Bir küre ekranın altına ulaşırsa, geçiş sona erer, sonra tıklama olayı% 100 çalışır.

kaynak

2013-10-28 Summon

Eğer jsfiddle bir örnek gösterebilir animasyon için? –

@ AdamMoszczyński burada kemandır http://jsfiddle.net/qfn7F/4/ – Summon

İlgili sorular: http://stackoverflow.com/questions/18629298/on-a-moving-element-dont-fire-the- fare olayları http://stackoverflow.com/questions/9304215/css3-translate3d-mouse-events-issue http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit- transform-translate3d http://stackoverflow.com/questions/18496551/translate3d-causing-jquery-hover-click-events-to-not-fire-correctly –

Css3 Transform kullanarak animasyon yaparken benzer bir sorunla karşılaştım. Intsead için css pozisyonları kullanıp vermek dönüşüm css kullanmanın intikal

jsfiddle.net

tDiv.style.top = (tDiv.offsetWidth * 0.5 + Math.random() * (window.innerWidth - tDiv.offsetWidth)) + "px"; 
tDiv.style.right = (window.innerHeight - tDiv.offsetHeight) + "px";

kaynak

2013-11-18 07:46:11

Bu, transformasyon animasyonu kadar etkili değildir, çünkü bu durumda öğeler önbelleğe alınmamış ... – Summon

Önbelleğe alma bölümünü anlayamadım. Bununla ilgili bir şeyi açıklayabilir misiniz? –

Dönüştürme özelliğini kullanarak bir öğeyi üst, sol vb. Yerine animasyonlu hale getirirseniz, GPU hızlandırması nedeniyle performans çok daha yüksektir. Bu, öğeye bir translate3d (0,0,0) uygular ve sonra sol üst özellikleri harekete geçirirseniz bile geçerlidir. Daha fazla detay burada: http://stackoverflow.com/questions/9661876/css-is-transition-left-top-gpu-accelerated – Summon

Geçiş html öğeleriyle etkileşim kurulamıyor

cevap

İlgili konular