Επομένως, θα θέλατε να κάνετε κίνηση της ιδιότητας εμφάνισης

Η Ομάδα Εργασίας CSS το επιδοκίμασα πριν από μερικές εβδομάδες. Η σούπερ ντούπερ εννοιολογική πρόταση είναι ότι μπορούμε να εμψυχώσουμε ή να μεταβούμε από, ας πούμε, display: block προς την display: none.

Είναι ένα κομμάτι του εγκεφάλου-συστροφή για να συλλογιστεί για το σκηνικό display: none σε ένα στοιχείο ακυρώνει κινούμενα σχέδια. Και η προσθήκη του επανεκκινεί τα κινούμενα σχέδια. Σύμφωνα με τις προδιαγραφές:

Ρύθμιση του display ιδιοκτησία να none θα τερματίσει κάθε τρέχουσα κινούμενη εικόνα που εφαρμόζεται στο στοιχείο και στους απογόνους του. Εάν ένα στοιχείο δεν έχει καμία εμφάνιση, ενημέρωση της εμφάνισης σε τιμή διαφορετική από none θα ξεκινήσει όλα τα κινούμενα σχέδια που εφαρμόζονται στο στοιχείο από το animation-name ιδιοκτησία, καθώς και όλα τα κινούμενα σχέδια που εφαρμόζονται σε απογόνους με display πλην none.

Αυτή η κυκλική συμπεριφορά είναι που κάνει την ιδέα φαινομενικά νεκρή κατά την άφιξη. Αλλά if @keyframes υποστήριξε οποιαδήποτε display αξία πλην none, τότε δεν υπάρχει τρόπος none για ακύρωση ή επανεκκίνηση των πραγμάτων. Αυτό δίνει μηnone αξίες προτεραιότητας, επιτρέποντας none να κάνει το πράγμα του μόνο αφού ολοκληρωθεί η κινούμενη εικόνα ή η μετάβαση.

της Μίριαμ κορνάρω (αυτό είναι που πραγματικά ονομάζουμε αυτά, σωστά;) εξηγεί πώς μπορεί να λειτουργήσει:

Δεν παρεμβάλλουμε ακριβώς μεταξύ, ας πούμε, block και none, αλλά επιτρέποντας block να παραμείνει ανέπαφο μέχρι τη στιγμή που τα πράγματα σταματήσουν να κινούνται και είναι ασφαλής η εφαρμογή none. Αυτές είναι λέξεις-κλειδιά, επομένως δεν υπάρχουν σαφείς τιμές μεταξύ των δύο. Ως εκ τούτου, αυτό παραμένει ένα διακριτό κινούμενο σχέδιο. Κάνουμε εναλλαγή μεταξύ δύο τιμών μόλις ολοκληρωθεί αυτή η κινούμενη εικόνα.

Αυτή είναι η Ρόμπερτ ΦλακΤο παράδειγμα του προέρχεται κατευθείαν από η συζήτηση:

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

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

Αυτό είναι ένα χρήσιμο παράδειγμα γιατί δείχνει πώς το πρώτο πλαίσιο ορίζει το στοιχείο display: block, στο οποίο δίνεται προτεραιότητα έναντι του υποκείμενου display: none ως μηnone αξία. Αυτό επιτρέπει στο animation να τρέχει και να τελειώνει χωρίς none ακυρώνοντας ή επαναφέροντάς το στη διαδικασία, καθώς επιλύεται μόνο μετά το κινούμενο σχέδιο.

Αυτό είναι το παράδειγμα που αναφέρθηκε η Miriam στο Mastodon:

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

Αυτή τη φορά έχουμε να κάνουμε με μια μετάβαση. Το υποκείμενο display η τιμή έχει οριστεί σε none προτού συμβεί οτιδήποτε, επομένως είναι εντελώς εκτός ροής εγγράφων. Τώρα, αν επρόκειτο να το μεταφέρουμε αυτό κατά την αιώρηση, ίσως ως εξής:

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

…τότε το στοιχείο θα πρέπει θεωρητικά να ξεθωριάσει στο 200ms. Και πάλι, εναλλάσσουμε display αξίες, αλλά block δίνεται προτεραιότητα, ώστε η μετάβαση να μην ακυρωθεί εκ των προτέρων και να εφαρμοστεί στην πραγματικότητα μετά opacity τελειώνει τη μετάβασή του.

Τουλάχιστον έτσι το διαβάζει το μυαλό μου. Χαίρομαι που υπάρχουν εξαιρετικά έξυπνοι άνθρωποι που σκέφτονται αυτά τα πράγματα γιατί φαντάζομαι ότι υπάρχει ένας τόνος για να τακτοποιήσουμε. Για παράδειγμα, τι συμβαίνει εάν εκχωρηθούν πολλαπλές κινούμενες εικόνες σε ένα στοιχείο — θα none επαναφορά ή ακύρωση κάποιου από αυτά; Είμαι βέβαιος ότι τα πάντα, από άπειρα κινούμενα σχέδια, αντίστροφες κατευθύνσεις και κάθε είδους άλλα πράγματα θα αντιμετωπιστούν εγκαίρως.

Αλλά τι υπέροχο πρώτο βήμα!