CSS3-Element mit Opacity:0 (unsichtbar) auf Mausereignisse reagiert

CSS3 mit Webkit in Safari, ich habe eine Schaltfläche, wenn darauf geklickt wird, wird ein div eingeblendet werden. Das div ist nur ein großes gefülltes Rechteck und es hat ein paar Tasten in es, eine whichcauses den gleichen div-fade-out.

Das problem ist: Wenn das element ausgeblendet (opacity:0), und ich klicken Sie auf, wo Sie mit einer der Tasten wurde der onClick wird noch gefeuert. In otherwords, auch wenn die Schaltfläche nicht sichtbar ist (opacity:0) es ist immer noch da und ist Teil der event-Modell. Ich möchte das nicht.

Den-Tasten rufen Sie die folgenden Funktionen:

// 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";

}

Die CSS-Klasse für das overlay ist diese:

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

Wenn ich nicht die Sicht oder die display-Einstellungen an alle, die animation ist in Ordnung, aber der Mausklick-Ereignisse ausgelöst werden, für die unsichtbaren Elemente.

Wenn ich die Blöcke, dann schaltet on/off mit keine animation.

Wenn ich mit den Anzeige-Stil, dann ist es irgendwie funktioniert, aber anstatt die animation display sofort, dass es nur Triggern, einmal mit einem anderen Ereignis der Seite ausgelöst wird, wie eine andere Taste, die an anderer Stelle auf der Seite.

Dachte ich, vielleicht hinzufügen der "pointer-events:none", um den Stil der pop-up-div, nachdem Sie verborgen, aber was ich verlange, scheint wie etwas, das Sie würde oft in der Begegnung mit der Deckkraft, so muss es ein semi-häufiges problem.

Gedanken?

InformationsquelleAutor Woodster | 2011-01-13

css webkit

9

Wenn Sie die Einstellung Ihrer div haben eine Deckkraft von null, du bist immer noch in der Lage sein, um die Interaktion mit den "unsichtbaren" posten. Sie wollen, um es zu display:none statt. Sie könnte beides tun, so dass die div zu fade-out auf null und dann tack auf der display:none wenn die animation beendet ist.
- Wahr. Sie sollten denken, Opazität:0 element, als ob es war aus Glas 🙂
- Die display:none // display:block funktioniert, um das problem mit der Maus klicken, aber dann ist die Deckkraft nicht animieren, von 1 auf 0. Das div nur pops auf und ab. Das war das problem mit dem display: - Attribut. Ich habe versucht Einstellung der display:none vor und nach der Einstellung "Deckkraft": 0, aber ich glaube (?) die Ergebnisse der Funktion angewendet werden en Masse nach dem Aufruf der Funktion auf und gibt ein Ergebnis der block verschwinden, anstatt ausblenden. Gibt es etwas, was ich tun müssen, so legt er den block nach dem Deckkraft-animation beendet ist?
- Ich könnte Ihnen empfehlen, schauen Sie in die Verwendung von jQuery für so etwas. Die integrierte Animations-Effekte (wie fadeOut) sind einfach zu bedienen. fadeOut verblasst, was auch immer aus und dann setzt es display:none aus der box.
- Ich akzeptiere, dass da ein guter Tipp. Ich habe noch nie verwendet jQuery vor, aber Lesen Sie einfach das erste tutorial, es sieht aus wie das richtige Werkzeug für diese Aufgabe also, ich gebe es zu gehen. Vielen Dank für die Führung!
- Update: jQuery war völlig eine großartige Lösung für dieses problem. So. Viel. Einfacher. Gestimmt-Up.
- display ist nicht eine unterstützte Eigenschaft für CSS-übergänge und die änderung der display-Eigenschaft bewirkt, dass der Kniehebel-Effekt statt des übergangs-Effekt. visibility ist, was Sie wollen, mit zu arbeiten.
InformationsquelleAutor Michael Irigoyen
59

Sauber(er?) Lösung für das problem, das Sie haben - das ist ein häufiges problem für Dinge wie tooltips und modal popups mit einem "fade-in-Effekt' - ist nicht nur der übergang zwischen "Deckkraft", aber auch "sichtbar" - Eigenschaft. Im Gegensatz zu 'display', 'Sichtbarkeit' ist eine tatsächliche animierbar Eigentum, und er wird das richtige tun, es macht das element unsichtbar (und nicht mehr reagiert auf Eingangs-Ereignisse) nur vor dem übergang beginnt, und nur nach einem übergang zurück in den Ausgangszustand.

Die zuvor gegebene Antwort nicht die Arbeit, sondern hängt von JavaScript zu manipulieren Eigenschaften, die möglicherweise weniger wünschenswert. Durch all dies geschieht durch Reine CSS -, JavaScript-hat nicht anderes zu tun als set und unset eine Klasse auf das element angezeigt werden soll. Wenn Sie eine QuickInfo, es kann getan werden, ohne JS überhaupt, indem Sie die tooltip-ein Kind-element und mit Hilfe der hover-pseudo-Selektor auf die Muttergesellschaft.

So für für ein popup ausgelöst, indem Sie auf etwas, Sie würde Stil es in etwa so:
```
#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;
}
```
Dann ist dein JavaScript kann einfach Umschalten, die "gezeigt" - Klasse.

Einem live-Beispiel: http://jsfiddle.net/y33cR/2/
- Dies sollte akzeptiert werden Antwort IMHO.
- Das ist großartig. taccgl.org/blog/... erklärt auch die Sichtbarkeit übergang Semantik. greywyvern.com/?post=337 geht sehr ins detail (aber mehr erschwert, indem eine transition delay).
- Feine Verwendung von Sichtbarkeit, danke, ich wusste nicht, Elemente versteckt von Sicht keine Ereignisse auslösen.
- Ich Schätze die "Deckkraft" in den code. Auf der Grundlage der Wortlaut der Antwort war ich Verständnis, das es bedeutet, ich könnte nur animieren, Sichtbarkeit und er würde tun, was Sie erwarten würde.
InformationsquelleAutor aphax
8

Was Sie tun können, deaktivieren Sie die-Taste, während Sie die "Deckkraft" auf 0 gesetzt ist mit den folgenden Stilen:
```
pointer-events: none;
cursor: default;
```
Diese Weise sind Sie nicht anklickbar und der Mauszeiger läßt sich nicht ändern, wenn es schwebt über, wo der Knopf war. Ich brauchte nur eine CSS-Lösung und dieses arbeitete für mich.
- Dies ist zwar ein Weg, es zu tun, ich lief in einige seltsame Safari-bugs, wenn Sie es auf ein popup mit einem video-element im inneren, besser zu gehen mit der animation der Sichtbarkeit der parameter, das scheint besser zu funktionieren auf allen aktuellen Browsern.
- Dies sollte die Antwort akzeptiert, weil es der eleganteste Weg, das zu tun, was OP ist gefragt für (+für mich gearbeitet).
InformationsquelleAutor ConorJohn

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.