Οι μεταβάσεις και τα κινούμενα σχέδια παίζουν σημαντικό ρόλο στην εμπειρία του χρήστη. Προσθέτοντας λεπτές κινούμενες εικόνες και μεταβάσεις μεταξύ στοιχείων στην ιστοσελίδα, μπορείτε να βελτιώσετε την εμπειρία του χρήστη. Ο ιστότοπος θα φαίνεται πολύ πιο ομαλός, πιο ελκυστικός και γενικά καλύτερος καθ' όλη τη διάρκεια.

Αυτό το σεμινάριο δείχνει πώς να εφαρμόσετε μεταβάσεις και κινούμενα σχέδια στο Vue.js. Θα μάθετε πώς να δημιουργείτε απλές μεταβάσεις και πολύπλοκα κινούμενα σχέδια χρησιμοποιώντας το μετάβαση συστατικό και βασικά καρέ CSS.

Το στοιχείο μετάβασης Vue.js

Το Vue.js έχει ενσωματωμένο μετάβαση στοιχείο που σας επιτρέπει να δημιουργείτε κινούμενα σχέδια στην εφαρμογή σας. Αυτό το στοιχείο τυλίγεται γύρω από το στοιχείο στόχο που θέλουμε να κινούμε.

Εδώ το στοιχείο μετάβασης αναδιπλώνει την κεφαλίδα επιπέδου ένα:

 Γεια σας </h1>
</transition>

Όταν τυλίγετε ένα στοιχείο με το μετάβαση στοιχείο, το στοιχείο θα εφαρμόσει κλάσεις μετάβασης στο στοιχείο που αναδιπλώνει. Υπάρχουν έξι μεταβατικές τάξεις συνολικά. Τρεις ελέγχουν την κίνηση του στοιχείου καθώς εισέρχεται στη σελίδα. Τα άλλα τρία ελέγχουν την κινούμενη εικόνα του στοιχείου καθώς αυτό φεύγει από τη σελίδα.

Ο κώδικας που χρησιμοποιείται σε αυτό το άρθρο είναι διαθέσιμος σε αυτό Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT.

Εφαρμογή κλάσεων μετάβασης όταν τα στοιχεία εισέρχονται στη σελίδα

Κατά τη διαδικασία εισόδου του στοιχείου στο DOM, το μετάβαση συστατικό εφαρμόζει τις κλάσεις εισαγάγω-από, εισάγω-να, και enter-active σε αυτό. Αυτές οι κλάσεις σάς επιτρέπουν να ελέγχετε τον τρόπο με τον οποίο το στοιχείο θα κινείται ή θα μεταβαίνει στη σελίδα.

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

Ας δούμε ένα παράδειγμα:

<μετάβαση>
 <h1> Γειά σουh1>
μετάβαση>
.εισόδου-από {
αδιαφάνεια: 0;
}
.enter-to {
αδιαφάνεια: 1;
}
.enter-active {
μετάβαση: αδιαφάνεια 2μικρόευκολία;
}

Με αυτόν τον κωδικό, η κεφαλίδα επιπέδου 1 χρειάζεται δύο δευτερόλεπτα για να μεταβεί από το αόρατο (αδιαφάνεια: 0) σε πλήρως ορατή (αδιαφάνεια: 1). Αυτή η μετάβαση συμβαίνει όταν το στοιχείο εισέρχεται στο DOM. Χωρίς τη μετάβαση, το κείμενο θα εμφανιζόταν αμέσως στο πρόγραμμα περιήγησης μόλις φορτωθεί η σελίδα.

Εφαρμογή κλάσεων μετάβασης όταν τα στοιχεία φεύγουν από τη σελίδα

ο μετάβαση Το στοιχείο υποστηρίζει τρεις άλλες κλάσεις μετάβασης τις οποίες πρέπει να εφαρμόσετε όταν το στοιχείο φεύγει από το DOM. Τα ονόματά τους είναι άδεια-από, άφησε σε, και άδεια-ενεργός. Αυτές οι κλάσεις ελέγχουν τον τρόπο με τον οποίο το στοιχείο θα κινείται ή θα μεταβαίνει από τη σελίδα.

Όπως ίσως έχετε μαντέψει, αυτές οι τάξεις είναι παρόμοιες με τις εισαγω- μαθήματα που συζητήσαμε νωρίτερα. Αλλά αυτές οι κλάσεις ενεργοποιούνται μόνο όταν το στοιχείο πρόκειται να αποσυνδεθεί από το DOM. Η τοποθέτηση και η αποσυναρμολόγηση είναι σημαντικές έννοιες του DOM. Ως προγραμματιστής, θα πρέπει να έχετε ένα βασική κατανόηση του DOM και άλλες σχετικές έννοιες.

Ας δούμε ένα παράδειγμα:

<μετάβαση>
 <h1> Γειά σουh1>
μετάβαση>
.φεύγω-από {
αδιαφάνεια: 0;
}
.άφησε σε {
αδιαφάνεια: 1;
}
.αποχωρώ-ενεργός {
μετάβαση: αδιαφάνεια 2μικρόευκολία;
}

Σε αυτήν την περίπτωση, η κεφαλίδα επιπέδου 1 χρειάζεται δύο δευτερόλεπτα για να μεταβεί αργά από την ορατή (αδιαφάνεια: 1) σε αόρατο (αδιαφάνεια: 0). Αυτή η μετάβαση συμβαίνει όταν το στοιχείο φεύγει από το DOM. Χωρίς τη μετάβαση, το κείμενο θα είχε εξαφανιστεί από το πρόγραμμα περιήγησης αμέσως.

Χρήση ονομάτων μετάβασης

Μπορείτε επίσης να προσθέσετε ένα όνομα αποδίδουν στο στοιχείο μετάβασης. Όταν το κάνετε αυτό, το Vue θα προσθέσει το όνομα στις κλάσεις μετάβασης. Αυτό σημαίνει ότι μπορείτε να έχετε πολλές μεταβάσεις στη σελίδα σας, καθεμία με μοναδικές κλάσεις μετάβασης και ιδιότητες CSS.

Για παράδειγμα, εάν ορίσετε το όνομα ξεθωριάζει στο στοιχείο μετάβασης, τότε θα προστεθεί το πρόθεμα όλων των κλάσεων μετάβασης ξεθωριάζει:

<μετάβασηόνομα ="ξεθωριάζει">
 <h1> Γειά σουh1>
μετάβαση>
.ξεθωριάζουν-εισέρχονται-από {
αδιαφάνεια: 1;
}
.ξεθωριάζω-φεύγω-από {
αδιαφάνεια: 1;
}
// άλλα "εισαγω" και "άδεια" τάξειςμεοξεθωριάζειόπως καιπρόθεμα

Δημιουργία μεταβάσεων με χρήση του στοιχείου μετάβασης

Για να δείξετε τη μετάβαση στο Vue.js, θα τυλίξετε ένα H1 μέσα στο μετάβαση συστατικό. Κάτω από, θα δημιουργήσετε ένα κουμπί. Όταν κάνετε κλικ σε αυτό το κουμπί, αλλάζει τη μεταβλητή showTitle μεταξύ ψευδής και αληθής.

Εδώ είναι ο κωδικός:

Στη συνέχεια, ορίστε το γραφή Ενότητα. Αυτή η ενότητα περιέχει το εγκατάσταση μέθοδο όπου αρχικοποιείτε το showTitle μεταβλητή με ψευδής.