javascript css animation - Sichtbarkeit: Versteckt vs Anzeige: Keine vs Opazität: 0





3 Answers

Sie alle machen das Element unsichtbar, unterscheiden sich jedoch darin, ob es Platz beansprucht und Klicks verbraucht

+--------------------+----------------+-----------------+
| Property           | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0         |        ✓       |        ✓        |
+--------------------+----------------+-----------------+
| visibility: hidden |        ✓       |        ✗        |
+--------------------+----------------+-----------------+
| display: none      |        ✗       |        ✗        |
+--------------------+----------------+-----------------+

✓: yes
✗: no

Und wenn wir sagen, dass es Klick verbraucht, bedeutet das, dass es auch andere Zeiger-Ereignisse wie ondblclick, onmousedown, onmousemove usw. verbraucht.

Im Wesentlichen verhält sich "visibility: none" wie eine Kombination aus "opacity: 0" und "pointer-events: none".

performance rendering web

Ich beginne gerade mit einem Animationsprojekt. In dem Projekt werde ich mehr als 40000 div und sie iterativ animieren. Wenn eines der div Elemente in passivem Zustand ist (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 Rendering-Leistung wie fps, GPU-Nutzung messen?




Display: none blendet das gesamte Element aus und entfernt es aus dem Layout-Bereich. Visibility: hidden verbirgt ein Element, nimmt aber den gleichen Platz ein wie zuvor.
Deckkraft kann verwendet werden, wenn Sie Transparenz oder Fade-Effekt erstellen möchten.




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

z.B

Normalzustand / Element vom Bildschirm entfernt:

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

Schwebe Zustand / Element auf dem Bildschirm:

visibility:visible;
opacity:1;



Related