slideUp/ slideDown/ slideToggle με απλή JavaScript

[philos]

Καλησπέρα παιδιά!

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

Ουσιαστικά το slideUp λειτουργεί κανονικά, οπότε μένει να φτιάξω το slideDown και το slideToggle. Μπορεί κάποιος να το διορθώσει; Ευχαριστώ εκ των προτέρων!!

Ουσιαστικά το έχω πάρει από εδώ: https://w3bits.com/labs/javascript-slidetoggle/

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

Επεξ/σία 17 Ιουνίου 2019 από philos

[philos]

Βασικά παιδιά για να εξηγήσω τι προσπαθώ να κάνω: θέλω προκειμένου να βελτιώσω την απόδοση στο Google, να ξηλώσω τελείως το jquery.js από τις σελίδες των επισκεπτών (όταν κάνει κανείς login θα φορτώνει κανονικά).

Έχω εντοπίσει ότι στις σελίδες επισκεπτών χρησιμοποιώ μόνο τα ακόλουθα, συνεπώς προσπαθώ να τα χτίσω με καθαρή JavaScript η οποία θα εντοπίζεσαι σαν "jQuery." βιβλιοθήκη.

slideToggle

slideUp

slideDown

show

hide

toggle

fadeIn

fadeOut

ready

 

 

Υπάρχει περίπτωση να μπορώ να βρω κάπου στο διαδίκτυο πετσοκομμένη τη jQuery βιβλιοθήκη; Δηλαδή ουσιαστικά να μην κάνω αλλαγές στον κώδικα του site αλλά να αλλάξω απλά τη βιβλιοθήκη που φορτώνω.

Επεξ/σία 17 Ιουνίου 2019 από philos

[vadou]

Κανονικά θα πρέπει να μάθεις πώς λειτουργούν όλα αυτά που σου παρέχει έτοιμα η jQuery και να βρεις τον τρόπο να τα υλοποιήσεις χωρίς αυτήν.
Για πιο γρήγορα, δες το plain.js και θα βρεις λύσεις σε πολλά θέματα που αναφέρεις.
Κατά τη γνώμη μου, καλό θα ήταν να καταλάβεις τι κάνει κάθε snippet και να μην κάνεις ένα στεγνο copy paste.

[k33theod]

To css εχει μια ιδιότητα που λέγεται transition όπου ορίζεις το χρόνο που αλλάζει ένα property.

Έχω κάνει μόνο το toggle (αν εννοείς αυτό) στο slideup down δεν βλέπω κάποια χρησιμότητα. Αφού το toggle τα κάνει και τα 2

https://codepen.io/k33theod/pen/gNMawd

 

[XPHSTOS_]

Ότι μπορεί να γίνει με CSS, καλό είναι να γίνει με CSS.
Για όλα τα υπόλοιπα, javascript με requestAnimationFrame (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Γενικά όμως, καλό είναι κάποια properties να μην κάνουμε animate, για λόγους performance. (https://developers.google.com/web/fundamentals/performance/rendering/)
Το Height είναι ένα από αυτά... τις περισσότερες φορές κιόλας δεν χρειάζεται το animation, είναι περιττό.

Ένα πολύ καλό site είναι το: https://csstriggers.com/
Όπου εξηγεί για κάθε property τι αλλαγές trigg-άρει κατά το animation του.
Το opacity για παράδειγμα βλέπουμε ότι είναι αρκετά πιο ελαφρύ από το height.