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

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

Horodatage: 15 décembre 2022 10h41
Nœud source: 1773838

Le groupe de travail CSS a donné un coup de pouce il y a quelques semaines. La proposition conceptuelle super-duper étant que nous pouvons animer ou passer de, disons, display: block à display: none.

C'est un peu un casse-tête de raisonner, car le réglage display: none sur un élément annule les animations. Et l'ajouter redémarre les animations. Selon la spécification :

Réglage display propriété à none mettra fin à toute animation en cours appliquée à l'élément et à ses descendants. Si un élément n'a aucun affichage, la mise à jour de l'affichage à une valeur autre que none lancera toutes les animations appliquées à l'élément par le animation-name propriété, ainsi que toutes les animations appliquées aux descendants avec display autre que none.

Ce comportement circulaire est ce qui rend le concept apparemment mort à l'arrivée. Mais if @keyframes pris en charge tout display Plus-value autre que none, alors il n'y a aucun moyen pour none pour annuler ou redémarrer des choses. Cela donne non-none valorise la priorité, permettant none ne faire son travail qu'une fois l'animation ou la transition terminée.

de Myriam siffler (c'est ainsi que nous les appelons vraiment, n'est-ce pas ?) explique comment cela pourrait fonctionner :

Nous n'interpolons pas exactement entre, disons, block et de none, mais permettant block pour rester intact jusqu'à ce que les choses cessent de bouger et qu'il soit sûr d'appliquer none. Ce sont des mots clés, il n'y a donc pas de valeurs explicites entre les deux. En tant que tel, cela reste une animation discrète. Nous basculons entre deux valeurs une fois que l'animation est terminée.

Il s'agit de la Robert Flakl'exemple tiré directement de la discussion:

@keyframes slideaway { from { display: block; } to { transform: translateY(40px); opacity: 0;}
} .hide { animation: slideaway 200ms; display: none;
}

Ceci est un exemple utile car il montre comment le premier cadre définit l'élément sur display: block, qui a priorité sur le sous-jacent display: none en tant que non-none évaluer. Cela permet à l'animation de s'exécuter et de se terminer sans none l'annuler ou le réinitialiser dans le processus car il ne résout que après l'animation.

Voici l'exemple référencé par Miriam sur Mastodon :

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

Nous avons affaire à une transition cette fois. Le sous-jacent display la valeur est définie sur none avant que quoi que ce soit ne se produise, il est donc complètement hors du flux de documents. Maintenant, si nous devions faire la transition en survol, peut-être comme ceci :

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

…alors l'élément devrait théoriquement s'estomper à 200ms. Encore une fois, nous basculons entre display valeurs, mais block est prioritaire afin que la transition ne soit pas annulée à l'avance et qu'elle soit réellement appliquée après opacity termine sa transition.

Du moins c'est comme ça que mon esprit y lit. Je suis content qu'il y ait des gens super intelligents qui réfléchissent à ces choses parce que j'imagine qu'il y a une tonne à régler. Par exemple, que se passe-t-il si plusieurs animations sont attribuées à un élément ? none réinitialiser ou annuler l'un de ceux-ci ? Je suis sûr que tout, des animations infinies aux directions inversées et toutes sortes d'autres choses, sera traité à temps.

Mais quel premier pas super cool !

Horodatage:

Plus de Astuces CSS