Ψηφιακό ύψος - ο σωστός τρόπος

Ας είμαστε ειλικρινείς. Το ζωτικό ύψος μπορεί να είναι ένας τεράστιος πόνος. Για μένα, υπήρξε μια συνεχής μάχη ανάμεσα στο να θέλεις να κάνεις ωραία κινούμενα σχέδια και να μην είσαι πρόθυμος να πληρώσεις το τεράστιο κόστος απόδοσης που σχετίζεται με το ύψος της κίνησης. Τώρα - όλα έχουν τελειώσει.

Όλα ξεκίνησαν όταν δούλευα στο πλευρικό μου έργο - ένα βιογραφικό βιογραφικό όπου μπορείτε να μοιραστείτε συνδέσμους με το βιογραφικό σας που είναι ενεργοί μόνο για μια συγκεκριμένη χρονική περίοδο.

Ήθελα να έχω μια ωραία κινούμενη εικόνα για όλες τις ενότητες στο βιογραφικό, και δημιούργησα ένα αντιδραστικό στοιχείο που εκτελούσε την κινούμενη εικόνα. Ωστόσο, σύντομα ανακάλυψα ότι αυτό το στοιχείο κατέστρεψε τελείως την απόδοση σε συσκευές χαμηλότερης τεχνολογίας και σε ορισμένα προγράμματα περιήγησης. Κόλαση, ακόμη και ο επαγγελματίας μου Macbook υψηλού επιπέδου αγωνίστηκε να διατηρήσει ομαλή fps στο animation.

Ο λόγος για αυτό είναι φυσικά ότι η κίνηση της ιδιότητας ύψους στο CSS προκαλεί στο πρόγραμμα περιήγησης να εκτελεί ακριβές λειτουργίες διάταξης και βαφής σε κάθε πλαίσιο. Υπάρχει μια φανταστική ενότητα σχετικά με την απόδοση της απόδοσης στο Google Web Fundamentals, σας προτείνω να το δείτε.

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

Γιατί πρέπει να νοιαζόμαστε ακόμη και για την απόδοση;

Μπορεί να είναι δελεαστικό να αγνοήσετε την απόδοση. Δεν είναι σοφό, αλλά μπορεί να είναι δελεαστικό. Από επιχειρηματική σκοπιά, εξοικονομείτε πολύ χρόνο που διαφορετικά μπορεί να δαπανηθεί για τη δημιουργία νέων δυνατοτήτων.

Ωστόσο, η απόδοση μπορεί να επηρεάσει άμεσα την κατώτατη γραμμή σας. Τι καλό κάνει για να δημιουργήσει πολλά χαρακτηριστικά, εάν κανείς δεν τα χρησιμοποιεί; Πολλές μελέτες που πραγματοποιήθηκαν από την Amazon και την Google δείχνουν ότι αυτό ισχύει. Η απόδοση συνδέεται άμεσα με τη χρήση εφαρμογών και τα έσοδα της κατώτατης γραμμής.

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

Όπως αποδεικνύεται από το εξαιρετικό άρθρο του Addy Osmani, οι συσκευές χαμηλών προδιαγραφών χρειάζονται πολύ περισσότερο χρόνο για την ανάλυση και την εκτέλεση javascript σε σύγκριση με τους αντίστοιχους υψηλότερου επιπέδου.

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

Ζώστε το ύψος με τον σωστό τρόπο

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

  • Επίδειξη ιστότοπου που χρησιμοποιεί την τεχνική
  • Ζωντανό παράδειγμα στη βανίλια JS
  • Απλό παράδειγμα στην αντίδραση
  • Πακέτο και τεκμηρίωση NPM για αντίδραση

Η ερώτηση που αναρωτήθηκα ήταν πώς θα μπορούσα να αποφύγω το κόστος απόδοσης που προκύπτει από το ύψος της κίνησης. Απλή απάντηση - δεν μπορείτε.

Αντ 'αυτού, έπρεπε να γίνω δημιουργικός με άλλες ιδιότητες CSS που δεν επιβαρύνουν αυτά τα κόστη. Μεταμορφώνεται δηλαδή.

Δεδομένου ότι οι μετασχηματισμοί δεν επηρεάζουν το ύψος. Δεν μπορούμε απλώς να εφαρμόσουμε μια απλή ιδιότητα σε ένα στοιχείο και να γίνει. Πρέπει να είμαστε πιο έξυπνοι από αυτό.

Ο τρόπος που θα χρησιμοποιήσουμε για να επιτύχουμε την απόδοση της κίνησης του ύψους είναι στην πραγματικότητα με το πλαστά με το μετασχηματισμό: κλίμακαY. Η κινούμενη εικόνα γίνεται σε διάφορα βήματα:

Ακολουθεί ένα παράδειγμα:

 ${this.markup} `
  • Πρώτα πρέπει να πάρουμε το αρχικό ύψος του κοντέινερ στοιχείων. Στη συνέχεια, ορίζουμε το ύψος του εξωτερικού δοχείου να είναι σαφές σε αυτό το ύψος. Αυτό θα προκαλέσει τυχόν υπερχείλιση του περιεχομένου που αλλάζει, αντί να επεκτείνει τον γονέα του.
  • Μέσα στο εξωτερικό δοχείο έχουμε ένα άλλο div που είναι απολύτως τοποθετημένο ώστε να καλύπτει ολόκληρο το πλάτος και το ύψος του div. Αυτό είναι το φόντο μας και θα κλιμακωθεί μόλις αλλάξουμε τον μετασχηματισμό.
  • Έχουμε επίσης ένα εσωτερικό δοχείο. Το εσωτερικό δοχείο περιέχει τη σήμανση και θα αλλάξει το ύψος του ανάλογα με το περιεχόμενο που περιέχει.
  • Εδώ είναι το τέχνασμα:  Μόλις εναλλάξ ένα συμβάν που αλλάζει τη σήμανση, παίρνουμε το νέο ύψος του εσωτερικού δοχείου και υπολογίζουμε το ποσό που πρέπει να κλιμακωθεί το φόντο για να προσαρμοστεί το νέο ύψος. Στη συνέχεια, ορίζουμε το φόντο σε κλίμακαY με το νέο ποσό.
  • Στο javascript της βανίλιας, αυτό σημαίνει κάποια απάτη με διπλές αποδόσεις. Μόλις πάρετε το ύψος του εσωτερικού δοχείου για να υπολογίσετε την κλίμακα. Και πάλι για να εφαρμόσετε την κλίμακα στο div div ώστε να εκτελέσει τον μετασχηματισμό.

Μπορείτε να δείτε ένα ζωντανό παράδειγμα εδώ στη βανίλια JS.

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

Για να μετακινήσετε το περιβάλλον περιεχόμενο. Πρέπει να προσαρμόσουμε το περιεχόμενο χρησιμοποιώντας το TransformY. Το κόλπο είναι να πάρετε το ποσό που το περιεχόμενο επεκτάθηκε και να το χρησιμοποιήσετε για να μετακινήσετε το περιβάλλον περιεχόμενο με μετασχηματισμούς. Δείτε το παραπάνω παράδειγμα.

Ύψος ζωτικότητας στο React

Όπως ανέφερα προηγουμένως, ανέπτυξα αυτήν τη μέθοδο ενώ εργαζόμουν σε ένα προσωπικό έργο στο React. Αυτός ο ιστότοπος επίδειξης χρησιμοποιεί αυτήν τη μέθοδο αποκλειστικά σε όλες τις «κινούμενες εικόνες ύψους». Δείτε τον ιστότοπο επίδειξης εδώ.

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

  • δείτε τη βιβλιοθήκη στο NPM εδώ
  • Μπορείτε να βρείτε την τεκμηρίωση εδώ.

Τα πιο σημαντικά στοιχεία αυτής της βιβλιοθήκης είναι το AnimateHeight και το AnimateHeightContainer. Ας τα εξετάσουμε:

// Inside a React component // handleAnimateHeight is called inside AnimateHeight and is passed the // transitionAmount and optionally selectedId if you pass that as a prop to // AnimateHeight. This means that you can use the transitionAmount to // transition your surrounding content.const handleAnimateHeight = (transitionAmount, selectedId) => { this.setState({ transitionAmount, selectedId }); }; // Takes a style prop, a shouldchange prop and a callback. shouldChange // determines when the AnimateHeight component should trigger, which is // whenever the prop changes. The same prop is used to control which // content to show.  {this.state.open && } {!this.state.open && } 
  • Παράδειγμα με μετακίνηση περιεχομένου γύρω

Τα παραπάνω παραδείγματα σας δείχνουν πώς να χρησιμοποιήσετε το AnimateHeight και να ενεργοποιήσετε χειροκίνητα το περιβάλλον περιεχόμενο για προσαρμογή. Τι γίνεται όμως αν έχετε πολύ περιεχόμενο και δεν θέλετε να κάνετε αυτήν τη διαδικασία χειροκίνητα; Σε αυτήν την περίπτωση μπορείτε να χρησιμοποιήσετε το AnimateHeight σε συνδυασμό με το AnimateHeightContainer.

Για να χρησιμοποιήσετε το AnimateHeightContainer θα πρέπει να παρέχετε σε όλα τα παιδιά ανώτερου επιπέδου ένα στήριγμα που ονομάζεται animateHeightId, το οποίο πρέπει επίσης να μεταφερθεί στα στοιχεία σας AnimateHeight:

// Inside React Component const handleAnimateHeight = (transitionAmount, selectedId) => { this.setState({ transitionAmount, selectedId }); }; // AnimateHeight receives the transitionAmount and the active id of the AnimateHeight that fired. {this.state.open &&  {!this.state.open && }  // When AnimateHeight is triggered by state change // this content will move because the animateHeightId // is greater than the id of the AnimateHeight component above I will move I will also move 

Όπως μπορείτε να δείτε από αυτό το παράδειγμα, το AnimateHeight λαμβάνει τις πληροφορίες που χρειάζεται για να προσαρμόσει το περιεχόμενο όταν το στοιχείο AnimateHeight ενεργοποιείται από την αλλαγή της κατάστασης.

Μόλις συμβεί αυτό, το στοιχείο AnimateHeight θα ενεργοποιήσει την επανάκληση και θα ορίσει τις ιδιότητες σε κατάσταση. Στο εσωτερικό του AnimateHeight μοιάζει κάπως έτσι (απλοποιημένο):

// Inside AnimateHeight componentDidUpdate() { if (update) { doUpdate() callback(transitionAmount, this.props.animateHeightId) } } // Equivalent to calling this function: const handleAnimateHeight = (transitionAmount, selectedId) => { this.setState({ transitionAmount, selectedId }); }; handleAnimateHeight(transitionAmount, this.props.animateHeight)

Τώρα εσείς το ποσό που το περιεχόμενο άλλαξε σε εικονοστοιχεία και το αναγνωριστικό του στοιχείου AnimateHeight που ενεργοποιήθηκε. Μόλις μεταβιβάσετε αυτές τις τιμές στο AnimateHeightContainer, θα τις μεταφέρει και θα πραγματοποιήσει μετάβαση των άλλων στοιχείων εντός του, υπό την προϋπόθεση ότι έχετε ρυθμίσει τα αυξημένα animateHeightIds στα παιδιά ανώτερου επιπέδου.

Πιο προηγμένα παραδείγματα:

  • Μετακίνηση περιβάλλοντος περιεχομένου με το AnimateHeightContainer
  • Παράδειγμα ακορντεόν

ΣΗΜΕΙΩΣΗ: Εάν χρησιμοποιείτε αυτήν τη μέθοδο για να μετακινήσετε το ύψος και να μετακινήσετε το περιβάλλον περιεχόμενο, πρέπει να προσθέσετε το ποσό μετάβασης στο ύψος της σελίδας σας.

συμπέρασμα

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

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

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