Donc, vous souhaitez animer la propriété d'affichage

Animer la propriété display: une révolution CSS?

Le groupe de travail CSS a récemment approuvé une proposition permettant l'animation et les transitions de la propriété display - un développement significatif. Cela signifie que nous pourrions animer en douceur les transitions entre, par exemple, display: block et display: none.

Cela présente un défi unique. Actuellement, le réglage display: none arrête brusquement toutes les animations en cours d'exécution. L'ajouter les redémarre. La spécification clarifie: le réglage display: none termine des animations; Changer display de none à une autre valeur les redémarre.

Ce comportement apparemment paradoxal a initialement suggéré que la proposition était irréalisable. Cependant, la clé est que @keyframes priorise toute valeur d'affichage autre que none. Cela empêche none d'interrompre ou de redémarrer l'animation jusqu'à ce qu'il soit complètement terminé.

L'explication de Miriam (appelons ces «toots», allons-nous?) Clarifie le processus: il ne s'agit pas d'interpoler entre block et none, mais permettant plutôt que block reste actif jusqu'à ce que l'animation se termine, à quel point none> en toute sécurité prend effet. L'animation reste discrète; Nous basculons entre les États après L'animation se termine.

L'exemple de Robert Flack illustre ceci:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

Le cadre initial priorise display: block, le remplacement display: none et la permission de l'animation avant none prend effet.

l'exemple de Mastodon de Miriam utilise des transitions:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

.hide:hover {
  display: block;
  opacity: 1;
}

Ici, display: none est initialement défini, supprimant l'élément du flux de document. En survol, la valeur block est prioritaire, permettant la transition une fois la transition d'opacité terminée.

Bien qu'il s'agisse d'un progrès significatif, il reste beaucoup à résoudre. L'interaction avec plusieurs animations, des animations infinies, des animations inversées, etc., nécessite une considération supplémentaire. Néanmoins, c'est un pas en avant révolutionnaire!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!