Element CSS3 z kryciem: 0 (niewidoczny) reaguje na zdarzenia myszy

Question

CSS3 za pomocą pakietu Webkit w Safari; Mam przycisk, który po kliknięciu powoduje, że element div znika. Ten element div jest po prostu dużym wypełnionym prostokątem i zawiera kilka przycisków, z których jeden ma tę samą różnicę, aby zaniknąć.

Problem polega na tym, że po wygaśnięciu elementu (krycie: 0) i kliknięciu tam, gdzie był jeden z przycisków, onClick nadal jest uruchamiany. W innych słowach, mimo że przycisku nie można zobaczyć (krycie: 0), nadal istnieje i jest częścią modelu zdarzenia. Nie chcę tego.

Przyciski zadzwonić pod następujące funkcje:

// This displays the overlay (popup) 
function showCategoryPopup() { 

// Was playing with the following, but with no success. 
// popupCategory.style.display = "block"; 
// popupCategory.style.visibility = "visible"; 

// Change the attributes that will be animated. 
popupCategory.style.opacity = 1; 
popupCategory.style.webkitTransform = "scale(1.0)"; 
} 

function hideCategoryPopup() { 
// Change the animated attributes 
popupCategory.style.opacity = 0; 
popupCategory.style.webkitTransform = "scale(0.7)"; 


// Even if opacity is 0, we still get mouse events. So, make it hidden? 
// popupCategory.style.visibility = "hidden"; 
// popupCategory.style.display = "none";  

}

Klasa CSS dla nakładki jest taka:

.popupContainer { 
    opacity: 0; 
    -webkit-transform: scale(0.7); 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-in-out; 
    -webkit-transition-delay: initial; 
} 

Jeśli nie używam ustawienia widoczności lub wyświetlania w ogóle animacja jest w porządku, ale zdarzenia mouseClick są wyzwalane dla niewidocznych elementów.

Jeśli korzystam z bloków, to włącza się/wyłącza bez animacji.

Jeśli używam stylu wyświetlania, to jest to rodzaj pracy, ale zamiast natychmiastowego wyświetlania animacji, wyzwala się tylko po wywołaniu jakiegoś innego zdarzenia na stronie, tak jak w innym przycisku na stronie.

Pomyślałem, że może dodać "pointer-events: none" do stylu używanego przez pop-up div po jego ukryciu, ale to, o co pytam, wydaje się być czymś, co często napotykasz z nieprzezroczystością, więc musi być wpół-częsty problem.

Myśli?

Answer 1

Jeśli ustawisz swój div na zero, nadal będziesz mógł wchodzić w interakcje z "niewidzialnym" przedmiotem. Zamiast tego chcesz ustawić go na display:none. Możesz zrobić jedno i drugie, pozwalając, aby div zanikło do zera, a następnie po display:none po zakończeniu animacji.

Answer 2

Czyste (er?) Rozwiązanie problemu, który występuje - co jest częstym problemem w przypadku podpowiedzi i modalnych wyskakujących okienek z efektem "zanikania" - jest nie tylko przejściem między kryciem, ale także właściwość "widoczności". W odróżnieniu od "display", "visibility" jest właściwością podlegającą animacji, i zrobi to, co właściwe, ponieważ powoduje, że element staje się niewidoczny (i nie reaguje na zdarzenia wejściowe) tylko przed rozpoczęciem przejścia i dopiero po przejściu w stan początkowy.

Podana wcześniej odpowiedź działa, ale zależy od JavaScriptu, aby manipulować właściwościami, które mogą być mniej pożądane. Dzięki temu, że wszystko to odbywa się za pomocą czystego CSS, twój JavaScript nie może zrobić nic innego, jak tylko ustawić i anulować klasę elementu, który musi zostać pokazany. Jeśli tworzysz etykietkę narzędziową, możesz to zrobić bez żadnego JS, czyniąc etykietkę elementu potomnego i używając pseudo-selektora "hover" na rodzica.

Więc dla dla popup wywołane przez kliknięcie na coś, byś projektować je tak:

#popup 
{ 
    /* ...cosmetic styling, positioning etc... */ 

    -webkit-transition: all 0.2s ease-in-out 0s; 
    -moz-transition: all 0.2s ease-in-out 0s; 
    -ms-transition: all 0.2s ease-in-out 0s; 
    transition: all 0.2s ease-in-out 0s; 

    opacity: 0; 
    visibility: hidden; 
} 

#popup.shown 
{ 
    opacity: 1; 
    visibility: visible; 
} 

Następnie JavaScript można po prostu przełączyć „pokazany” klasy.

Żywy przykład: http://jsfiddle.net/y33cR/2/

Answer 3

Co można zrobić, to wyłączyć przycisk, gdy zmętnienie jest ustawiony na 0 z następujących stylach:

pointer-events: none; 
cursor: default; 

ten sposób nie są klikalne i kursor nie zmienia się, gdy znajdzie się nad tym, gdzie znajdował się przycisk. Potrzebowałem rozwiązania tylko CSS i to działało dla mnie.