Sichtbarkeit: versteckt vs. Anzeige: keine vs. Deckkraft: 0

Lesezeit: 7 Minuten

Benutzer-Avatar
Cihad Turhan

Ich starte gerade ein Animationsprojekt. Im Projekt werde ich mehr als 40000 haben divs und animieren sie iterativ. Wenn einer von divs im passiven Zustand sind (dh es wird mindestens 2 Sekunden lang nicht animiert), werde ich sie nicht anzeigen, um die Animationsleistung zu erhöhen.

Die Frage ist: Welche CSS-Eigenschaft ist dafür am besten geeignet?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

Und wie kann ich die Renderleistung wie fps, GPU-Nutzung messen?

  • Wenn Sie 40.000 Divs animieren, treten Leistungsprobleme auf. Vielleicht sollten Sie sich die Verwendung von Leinwand / Flash ansehen.

    – Nicht definiert

    6. Februar 2013 um 14:09 Uhr

  • Ich denke, es ist schwierig, eine solche Animation in Canvas zu codieren, da es in Canvas keine Transformationseigenschaft gibt. Es gibt keine Übersetzungs- und Rotationsfunktionen im Canvas. Oder gibt es?

    – Cihad Turhan

    6. Februar 2013 um 14:13 Uhr

  • Im SVG-Format Es gibt

    – Fabian Schmengler

    6. Februar 2013 um 14:17 Uhr

  • Exaktes Duplikat von Hat opacity:0 genau denselben Effekt wie Visibility:hidden

    – Geschenk

    16. Dezember 2013 um 19:08 Uhr


  • Die bessere Option ist, SVG zu generieren und es dann in Canvas zu konvertieren und altes SVG aus DOM zu löschen. Dadurch erhalten Sie den Leistungsschub. Ich habe dies mit einem schönen Leistungsschub in getestet.

    – Shashwat Tripathi

    13. September 2017 um 10:24 Uhr

Benutzer-Avatar
Nishant

Während alle 3 Eigenschaften die Box eines Elements bilden erscheinen unsichtbar, gibt es entscheidende Unterschiede zwischen ihnen:

Eigentum Gemalt Im Layout Kontext stapeln Zeigerereignisse Keyboard-Ereignisse
opacity: 0; Nein Ja Neu Ja Ja
visibility: hidden; Nein Ja Variiert Nein Nein
display: none; Nein Nein Variiert Nein Nein
  • Die Spalte “Gemalt” gibt an, ob der Browser den Hintergrund des Elements malt (z background-image), #text Inhalt und so weiter.
    • Ein Element kann natürlich nicht gemalt werden, ohne auch am Layout der Seite beteiligt zu sein.
    • Das ist Nein für alle 3 Eigenschaften und Werte, da der Browser die Box des Elements nicht malen muss, da es unsichtbar ist.
  • Die Spalte “Im Layout” gibt an, ob der Browser das Layout und die Abmessungen des Elements berechnet – zusammen mit allen seinen Nachkommen, die nicht vom Layout ausgeschlossen sind.
    • Das ist nur Nein zum display: none;wie bei opacity: 0; und visibility: hidden; Der Browser bestimmt immer noch die Größe des Elements, damit er andere Elemente relativ zum aktuellen Element korrekt anordnen kann (z span.hidden { visibility: hidden; display: inline; }).
  • Die Spalte “Stapelkontext” gibt an, dass jede Verwendung von opacity (außer opacity: 1.0;) erstellt einen neuen Stapelkontext, der die Verwendung von erschwert position Eigentum.
  • Die Spalte “Zeigerereignisse” gibt an, ob das Element auf Benutzerinteraktionen von einem Zeigegerät wie einer Maus, einem Touchscreen, einem Stift usw. reagiert.
    • zB mit visibility: hidden; dann ist die :hover Status funktioniert nicht, und das Klicken auf dasselbe Element wird nicht angewendet :focus oder :active entweder.
    • Außerdem löst das DOM keine Zeigerereignisse aus, die Sie in JavaScript verarbeiten würden (z visibility: hidden; wird nicht erhöhen mouseclick, touchstartetc – beachten Sie, dass die click Event kann immer noch durch bestimmte Elemente ausgelöst werden, wie z <button> wenn sie vom Benutzer unter Verwendung einer Nicht-Zeiger-Eingabemethode aufgerufen wird, wie beispielsweise mit Tastatur- oder Sprachnavigationsmitteln (zugänglich).
      • Sie können verwenden pointer-events: none; um Zeigerereignisse zu blockieren, aber Dadurch werden Tastatur- und andere Nicht-Zeiger-Eingaben nicht blockiert und sollte daher nicht zum Deaktivieren eines Elements verwendet werden, da der Benutzer immer noch die Tastatur verwenden kann, um damit zu interagieren (insbesondere <button>, <input />, <select>und <textarea>).
  • Die Spalte “Tastaturereignisse” gibt an, ob mit dem Element über die Tastaturnavigation (und möglicherweise andere Navigationsmittel) interagiert werden kann.
    • Dazu gehören die „Zurück/Nächstes Feld“-Schaltflächen der Browser von Smart-Geräten (Smartphones und Tablets) zum Navigieren <form> Elemente (wie dies verwendet tabindex).
    • Im Gegensatz dazu können Pointer-Events in CSS mit deaktiviert werden pointer-events: none;gibt es keine CSS-Eigenschaft zum Deaktivieren der Tastaturinteraktion.

Diese Tabelle zeigt einen vollständigeren Vergleich zwischen den Hauptwerten dieser 3 Eigenschaften:

Eigentum Gemalt Im Layout Kontext stapeln Zeigerereignisse Keyboard-Ereignisse Animierbar
Opazität
opacity: 0; Nein Ja Neu Ja Ja Ja
opacity: 0.1; Ja Ja Neu Ja Ja Ja
opacity: 0.9; Ja Ja Neu Ja Ja Ja
opacity: 1; Ja Ja Variiert Ja Ja Ja
Sichtweite
visibility: hidden; Nein Ja Variiert Nein Nein Ja, mit Vorbehalten
visibility: visible; Ja Ja Variiert Ja Ja Ja, mit Vorbehalten
Anzeige
display: none; Nein Nein Variiert Nein Nein Nein
display: contents; Nur Text und Kinder Nur Text und Kinder Variiert Ja Ja Nein
Sonstiges
pointer-events: none; N / A N / A N / A Nein Ja Nein
  • Die Spalte “Animierbar” gibt an, ob diese Eigenschaft mit einem CSS-Übergang verwendet werden kann (transition:) oder CSS-Animation (@keyframes).

    • Entscheidend ist die display: Eigentum kann nicht animiert werdenweshalb wir a nicht verwenden können @keyframes Timeline, um ein Element nach Abschluss der Animation vollständig auszublenden.
      • Aber merkwürdigerweise wir kann animieren die visibility: Eigenschaft, obwohl sie nicht kontinuierlich ist, wenn auch mit Vorbehalten.
  • Lassen Sie sich auch nicht von den ähnlich benannten verwirren backface-visibility und content-visibility Eigenschaften.

  • Ich sollte diese Tabelle ausdrucken und an den Rand meines Computermonitors kleben.

    – Qian Chen

    8. Dezember 2018 um 9:17 Uhr

  • Perfekte Antwort! Sehr hilfreich.

    – Shay Yzhakov

    19. März 2019 um 12:31 Uhr


  • Erklärung hätte nicht besser sein können

    – Kushagr Arora

    11. Mai 2019 um 17:02 Uhr

  • Beachten Sie, dass es möglich ist, zB jQuery zu verwenden, um einen Klick auf Elemente auszulösen, die keinen Klick verbrauchen

    – Bart S

    24. April 2020 um 11:55 Uhr

Benutzer-Avatar
DF_

Die hier gefundene Antwort beantwortet Ihre erste Frage (höchstwahrscheinlich display:none da der Raum vollständig zusammengebrochen ist).

Zu Ihrer zweiten Frage, Tools wie z Dies wird wahrscheinlich nützlich für Sie sein. 40.000 Divs klingen jedoch nach viel zu viel und Sie werden wahrscheinlich eine bessere Leistung mit Canvas oder SVG erzielen (z. B. mit der KineticJS Bibliothek, da diese Animationen – Transformation, Drehung, Skalierung usw.) für Sie übernimmt.

  • Die angemessene Aktion wäre, die Frage als Duplikat zu markieren, anstatt auf die Antwort des Duplikats zu verlinken.

    – Geschenk

    16. Dezember 2013 um 19:10 Uhr

  • kaizou.org/2011/06/… ist ein 404 und ich habe die Antwort bearbeitet. Bearbeiten Sie entsprechend.

    – Funk Forty-Niner

    5. Januar 2017 um 13:09 Uhr


  • fantastische antwort!! Bewundern Sie, wie Sie zuerst die Frage beantwortet und dann einen besseren Ansatz vorgeschlagen haben.

    – Guy Park

    6. Oktober 2017 um 9:08 Uhr

display:none wird das gesamte Element ausblenden und aus dem Layoutbereich entfernen visibility:hidden verbirgt ein Element, nimmt aber den gleichen Platz wie zuvor ein.
Opazität kann verwendet werden, wenn Sie einen Transparenz- oder Fade-Effekt erzeugen möchten.

Benutzer-Avatar
Elias Bundala

Die Leistung wird ein Problem, wenn „display:none“ oder „visibility:hidden“ verwendet wird, da sie in den meisten Browsern „Paint“ und „Layout“ auslösen, was bedeutet, dass Ihr Browser das Ansichtsfenster neu zeichnet, wenn sich diese beiden Änderungen ändern immer noch nicht wie erwartet leistungsfähig sein, können Sie webgl mit einer Bibliothek namens html-gl ausprobieren, die Ihre divs in webgl check rendert https://github.com/PixelsCommander/HTML-GL

Hier ist eine Zusammenstellung verifizierter Informationen aus den verschiedenen Antworten.

Jede dieser CSS-Eigenschaften ist tatsächlich einzigartig. Neben der Unsichtbarkeit eines Elements haben sie die folgende(n) zusätzliche(n) Wirkung(en):

  1. Zusammenbrüche der Platz, den das Element normalerweise einnehmen würde
  2. Antwortet auf Veranstaltungen (z. B. Klick, Tastendruck)
  3. Beteiligt sich an der taborder
                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse    *      No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

von Link bekommen

Benutzer-Avatar
Fabian Schmengler

display:none weil die divs dann aus dem fluss genommen werden, also ihre position nicht berechnet werden muss.

Davon abgesehen klingen 40000 Divs verrückt. Haben Sie Alternativen wie HTML5-Canvas oder SVG in Betracht gezogen?

Benutzer-Avatar
atazmin

Manchmal verwende ich Sichtbarkeit und Deckkraft zusammen, um einen Effekt zu erzielen und Klickereignisse zu vermeiden

z.B

Normalzustand/Element vom Bildschirm entfernt:

visibility:hidden;
opacity:0;
transition: all .3s;

Schwebezustand/Element auf dem Bildschirm:

visibility:visible;
opacity:1;

1186450cookie-checkSichtbarkeit: versteckt vs. Anzeige: keine vs. Deckkraft: 0

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy