1. Transition (filtre)
En tant que composant pris en charge de base, il est référencé plusieurs fois par d'autres composants. Implémentez la possibilité de prendre en charge la transition en fonction du navigateur, puis liez l'événement final de l'animation;
Premièrement: créer un élément;
Ensuite: itérate Aperçu du nom d'animation de transition pris en charge par cet élément
La compétence de mise en œuvre de la transition consiste principalement à réécrire l'objet de l'événement de jQuery, et le code est le suivant:
$ (function () {$ .support.transition = transitionEnd () if (! $. support.transition) return $ .event.special.bstransitionEnd = {bindtype: $ .support.transition.end, delegatetype: $ .Support.transition.end, manche: function (e) {if ($ (e.target). e.handleobj.handler.apply (this, arguments)}}})2. Affix (positionnement flottant automatique)
1. Target: Le paramètre indique son nœud de référence de positionnement (ce doit être l'objet de conteneur parent qui génère la barre de défilement), et la par défaut est la fenêtre
2. Les valeurs supérieures et inférieures définies par le décalage des données ne seront utilisées que pour calculer les expressions et ne seront pas définies dans CSS.
3. Trois types de styles de positionnement:
3.1. Affix-top: le style qui sera ajouté lors de la fin du haut de la page
3.2. Affix: styles qui seront ajoutés au milieu de la page
3.3. Affix-Bottom: Styles qui seront ajoutés en bas de la page
4. Formule de traitement:
4.1. En haut: la hauteur de la barre de défilement du traget (scrolltop) <la distance de la position supérieure de l'élément (offsetop) (premier jugement)
4.1.1. ScrollTop est défini sur: Le haut positionné par l'élément lui-même (la distance par rapport au point d'origine de l'élément est actuellement positionnée à partir du document) (pas la première fois)
4.2. GetPinnedOffset: Obtenez le haut qui colle la barre de défilement cible supérieur de l'élément
4.3. En bas: si l'élément d'allumage est la première fois que le bas est positionné, alors le bas est la hauteur de la barre de défilement cible + la hauteur de l'élément cible> = la hauteur de l'ensemble de la hauteur de la barre de défilement du document à l'élément en bas
4.3.1. Si ce n'est pas la première fois, le positionnement du fond
1) Si le décalage (la distance de la position supérieure de l'élément) n'est pas vide, le haut de la cible + la valeur de GetPinnedOffset> La valeur de l'élément collant actuellement positionné en haut
2) Si le décalage est vide, le haut de la cible + la hauteur de l'élément cible> La hauteur de la hauteur du document colle au bas
4. Le seul sommet qui peut changer l'élément de collage est: Hauteur du document - la hauteur de l'élément de collage - la hauteur de l'élément de collage du bas
5. où se trouve la fosse:
1) Lorsque le haut et le bas sont utilisés ensemble, des conflits se produiront, raisons:
Affix-Bottom, c'est-à-dire lorsque vous atteignez le bas de la page, Bootstrap utilise le décalage pour définir la valeur supérieure et ajoute la position: valeur relative à l'élément, ce qui ne se traduit par aucun effet lors du défilement vers le bas après le retour en haut de la page.
Raison: L'ensemble relatif des styles en ligne remplacera les styles fixes ensemble en classe
6. Résumé
1) C'est bon dans la situation supérieure, et vous devez ajouter un contrôle manuel vous-même dans la situation inférieure
2) Lorsque vous appliquez le contrôle des affix, réécrivez au moins le style Affix vous-même pour contrôler le positionnement de la barre collante.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap
Cette série de didacticiels a été compilée dans: Bootstrap Basic Tutorials Touss spéciaux, bienvenue pour cliquer pour apprendre.
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.