visibility:hidden vs display:none vs opacity:0

Question

Je commence actuellement un projet d'animation. Dans ce projet, je vais avoir plus de 40000 div et les animer de manière itérative. Si l'un des div sont dans un état passif (c'est-à-dire qu'il n'y a pas d'animation pendant au moins 2 secondes), je ne les afficherai pas pour augmenter les performances de l'animation.

La question est la suivante : quelle propriété css est la plus appropriée pour cela ?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

Et comment puis-je mesurer les performances de rendu comme les images par seconde, l'utilisation du processeur ?

Answer 1

display:none parce que les divs sont alors retirés du flux, leur position ne doit donc pas être calculée.

Cela dit, 40000 divs, ça semble fou. Avez-vous envisagé les alternatives comme HTML5 canvas ou SVG ?

Answer 2

Parfois, j'utilise la visibilité et l'opacité ensemble pour obtenir un effet et éviter l'événement de clic.

par exemple

état normal/élément retiré de l'écran :

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

état de survol/élément à l'écran :

visibility:visible;
opacity:1;

Answer 3

J'ai trouvé ce fil de discussion en enquêtant sur un bogue de type "hover :" dans Safari mobile.

Confirmant que opacity: 0 est une approche valable (elle l'est dans mon cas, merci à tous). opacity: 0 le corrige suffisamment pour qu'il soit possible de le faire (il nécessite toujours un redessin en js ennuyeux lors de la rotation de l'écran [changement de largeur]).

Informations de base sur le bogue que j'ai corrigé avec opacity: 0 : Le survol se fait sur un li contenant un div qui est révélé lors du survol (ou du simple toucher sur mobile) d'une entrée de calendrier. C'est vraiment aléatoire de fonctionner/pas fonctionner dans Safari mobile - et encore plus étrange le comportement change sur une rotation d'écran++ [nb pas de media queries impliquées donc pas ça].

C'est très ennuyeux car cela fonctionne dans tous les autres navigateurs que j'ai essayés.