Πώς να εμφανίσετε και να αποκρύψετε ένα Div με Μετάβαση στο CSS

Σε αυτό το εγχειρίδιο, θα μάθουμε τη διαδικασία εμφάνισης και απόκρυψης του div με το ' μετάβαση ” ιδιοκτησία του CSS.

Πώς να εμφανίσετε και να αποκρύψετε ένα Div με Μετάβαση στο CSS;

Το CSS ' μετάβαση Η ιδιοκτησία καθιστά εύκολη την αλλαγή της αξίας του ακινήτου με βάση μια συγκεκριμένη περίοδο. Μπορεί να είναι αιωρούμενο ή ενεργό στοιχείο, ανάλογα με την κατάστασή του. Επιπλέον, η ιδιότητα μετάβασης του CSS χρησιμοποιείται για την εμφάνιση και την απόκρυψη του div σε HTML.

Τώρα, ας προχωρήσουμε στη σύνταξη της ιδιότητας μετάβασης.

Σύνταξη

Υπάρχουν δύο πράγματα που πρέπει να καθορίσετε κατά τη δημιουργία ενός εφέ μετάβασης:

• Προσθέστε ένα εφέ σε μια ιδιότητα CSS.
• Ρυθμίστε τη διάρκεια του εφέ.

Βασικα, ' μετάβαση ” είναι μια συντομογραφία που αποτελείται από τέσσερις άλλες ιδιότητες, οι οποίες δίνονται παρακάτω:

Ακολουθεί η περιγραφή των αναφερόμενων ακινήτων:

• μεταβατική ιδιότητα: Χρησιμοποιείται για να ορίσετε τη μετάβαση σε οποιαδήποτε ιδιότητα CSS. Όπως πλάτος, ύψος, αδιαφάνεια και πολλά άλλα.
• μετάβαση-διάρκεια: Χρησιμοποιείται για τον καθορισμό της διάρκειας της μετάβασης.
• μετάβαση-χρονισμός-συνάρτηση: Χρησιμοποιείται για να ρυθμίσετε την ταχύτητα της μετάβασης.
• μετάβαση-καθυστέρηση: Καθορίζει την ώρα έναρξης ή καθυστέρησης της μετάβασης.

Ας πάρουμε ένα παράδειγμα στο οποίο θα δείξουμε και θα αποκρύψουμε το div με το ' μετάβαση ” ιδιοκτησία του CSS. Για το σκοπό αυτό, πρώτα δημιουργούμε ένα « div ' και έναν τύπο εισόδου ' πλαίσιο ελέγχου '.

Βήμα 1: Δημιουργήστε και δώστε στυλ Div

Μέσα στην ετικέτα

HTML

Στο εξής, θα διαμορφώσουμε το div χρησιμοποιώντας την ιδιότητα χρώματος φόντου και θα ορίσουμε το χρώμα του φόντου ως ' rgb(238, 190, 118) '. Θα ορίσουμε το ύψος του div ως ' 150 εικονοστοιχεία ' και προσαρμόστε το περίγραμμα γύρω από αυτό ως ' 10 εικονοστοιχεία », « κορυφογραμμή ', και ' rgb(6, 56, 2) '. Στο τέλος, θα καθορίσουμε το μέγεθος της γραμματοσειράς ως ' 50 εικονοστοιχεία '.

CSS

Η έξοδος του κώδικα που περιγράφεται παραπάνω δίνεται παρακάτω. Εδώ, μπορείτε να δείτε ότι το div και το πλαίσιο ελέγχου δημιουργήθηκαν με επιτυχία:

Τώρα, προχωρήστε στο επόμενο βήμα στο οποίο αποκρύπτουμε και εμφανίζουμε το div χρησιμοποιώντας την ιδιότητα μετάβασης.

Βήμα 2: Εμφάνιση και απόκρυψη ενός Div με Μετάβαση

Για να γίνει αυτό, θα ορίσουμε το εφέ μετάβασης ορίζοντας ' αδιαφάνεια », η διάρκειά του ως « 2s ' και την τιμή της αδιαφάνειας ως ' 0 ” στην κλάση div που δημιουργήσαμε στο CSS:

Σημείωση: Θα εφαρμόσουμε τη μετάβαση στο ' αδιαφάνεια ιδιότητα για να ορίσετε τη διαφάνεια του στοιχείου. Εδώ, θα καθορίσουμε την τιμή του ως ' 0 ”, που σημαίνει ότι όταν ξεκινήσει η μετάβαση, το div θα παραμείνει κρυφό για δύο δευτερόλεπτα.

Αφού ορίσουμε τις τιμές μετάβασης, θα χρησιμοποιήσουμε ' εισαγωγή ' για να αποκτήσετε πρόσβαση στον τύπο εισόδου που δημιουργήθηκε στο αρχείο HTML και να ορίσετε την ψευδοκλάση του στοιχείου εισόδου ως ' :τετραγωνισμένος '. Στη συνέχεια, θα έχουμε πρόσβαση στο δημιουργημένο div και το ' + Ο τελεστής ' θα χρησιμοποιηθεί για να συσχετίσει το πλαίσιο ελέγχου με το div. Έτσι, όταν εκτελείται μια λειτουργία στο πλαίσιο ελέγχου, η χρήση της θα επηρεάσει το div. Στη συνέχεια, θα ορίσουμε την τιμή αδιαφάνειας ως ' 1 ”:

Σημείωση: Θα καθορίσουμε την τιμή αδιαφάνειας ως ' 1 ”, που σημαίνει ότι όταν επισημανθεί το πλαίσιο ελέγχου, θα εμφανιστεί το δημιουργημένο div. Επιπλέον, καταργήστε την επισήμανση για να αποκρύψετε το div

Όπως μπορείτε να δείτε, το div εμφανίζεται και κρύβεται χρησιμοποιώντας το ' μετάβαση 'περιουσία και' :τετραγωνισμένος ” ψευδο-κλάση στοιχείο:

Έχουμε εξηγήσει τη μέθοδο απόκρυψης και εμφάνισης ενός div με ιδιότητα μετάβασης στο CSS.

συμπέρασμα

Για να εμφανίσετε και να αποκρύψετε ένα div, το ' μετάβαση 'περιουσία και' :τετραγωνισμένος 'Το στοιχείο ψευδο-κλάσης χρησιμοποιείται με τέτοιο τρόπο ώστε η τιμή της αδιαφάνειας div ορίζεται ως ' 0 ' και στο :checked pseudo-class στοιχείο, ορίστε την αδιαφάνεια ως ' 1 '. Όταν ο χρήστης κάνει κλικ στο πλαίσιο ελέγχου, το div θα εμφανιστεί και όταν δεν είναι επιλεγμένο, το div θα κρυφτεί. Σε αυτό το εγχειρίδιο, έχουμε περιγράψει τη μέθοδο απόκρυψης και εμφάνισης div χρησιμοποιώντας την ιδιότητα μετάβασης.