Effet de transition
Sur les effets de transition
Pour des effets de transition simples, introduisez simplement Transition.js et autres fichiers JS ensemble. Si vous utilisez un fichier bootstrap.js compilé (ou comprimé), vous n'avez pas besoin de l'introduire séparément.
Quoi qu'il y a à l'intérieur
Transition.js est une aide de base pour l'événement transitionend et est également une simulation des effets de transition CSS. Il est utilisé par d'autres plug-ins pour détecter si le navigateur actuel prend en charge les effets de transition CSS.
pli
Donnez un style de base et une prise en charge flexible pour les composants qui prennent en charge les fonctions de pliage, telles que les acrondions et la navigation.
Dépendances du plugin
Le plugin d'effondrement dépend du plugin d'effet de transition.
Cas
À l'aide du plug-in pliant, un composant Acron simple est construit en étendant le composant du panneau.
Jetons un coup d'œil à l'effet en premier.
Ensuite, jetons un coup d'œil à l'implémentation du code.
<div style = "margin-top: 140px;"> <div id = "accordéon"> <div> <div> <h4> <a data-toggle = "effondrement" data-toggle = "effondrement" Data-Parent = "# accordéon" href = "# collapseone"> Group collapseable "> </a> </h4> </v> <v id =" Collapset Group "> </a> </h4> </v> <div Id =" Collapset Group "> reprenderit, Enim Eiusmod High Life Accusamus Terry Richardson ad Squid. 3 Wolf Moon Officiels, Brunch de Dolor de skateboard non cupidat. Camion de nourriture Quinoa Nesciunt Labourum Eiusmod. Brunch 3 Wolf Moon Tempor, Sun Aliqua a mis un oiseau dessus Squid Origin Coffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea PROIENT. AD Vegan Excepteur Butcher Vice Lomo. Leggings occaecat artisanat bière ferme à table, cru denim synthétique nesciunt vous n'avez probablement pas entendu parler d'accusamus de travail durable vhs. </div> </div> <div> <div> <h4> <a data-toggle = "effondrement" data-toggle = "collapse" data-parent = "# accorde" href = "# collatetwo"> collasible its de groupe 2 # 2 href = "# collatetwo" </a> </h4> </div> <div id = "Collapsetwo"> <div> Anim Pariatur Cliche Reprerederit, Enim Eiusmod High Life Accusamus Terry Richardson Ad Squid. 3 Wolf Moon Officielsaute, Brunch Dolor Skateboard non Cupidatat. Camion de nourriture Quinoa Nesciunt Labourum Eiusmod. Brunch 3 Wolf Moon Tempor, Sun Aliqua a mis un oiseau dessus Squid Origin Coffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea PROIENT. AD Vegan Excepteur Butcher Vice Lomo. Leggings occaecat artisanat de bière de bière à la table à la table, synthé esthétique du denim cru nesciunt Vous n'avez probablement pas entendu parler de l'accusamus du travail VHS durable. </div> </div> <div> <div> <h4> <a data-toggle = "effondrement" data-toggle = "effondrement" Data-Parent = "# Accordion" href = "# CollapSetHree"> Élément de groupe pliable # 3 </a> </h4> </v> <div id = "ColllapsEtHree"> <div> Anim Paratur Cliche Repriredit Rereredit, Enidim EiusMOD HOLC ACCUSAM Terry Richardson AD Squid. 3 Wolf Moon Official Aute, Brunch Dolor de skateboard non cupidatat. Camion de nourriture Quinoa Nesciunt Labourum Eiusmod. Brunch 3 Wolf Moon Tempor, Sun Aliqua a mis un oiseau dessus Squid Origin Coffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea PROIENT. AD Vegan Excepteur Butcher Vice Lomo. Leggings occaecat artisanat de bière de bière à la table à la table, synthé esthétique du denim cru nesciunt Vous n'avez probablement pas entendu parler de l'accusamus du travail VHS durable. </div> </div> </div> </div> </div>
Étape 1: Premièrement, la couche la plus externe de groupe de panneaux comprend plusieurs groupes ci-dessous.
Étape 2: Jetez un œil à des groupes simples
<div> <div> <h4> <a data-toggle = "effondrement" data-toggle = "effondrement" data-parent = "# accordeon" href = "# effondrement"> élément de groupe pliable # 1 </a> </h4> </div> <div id = "CollapseOne"> <v> </v> </v> </div>
La structure d'un panneau peut être clairement visible à travers le code.
Panel-leader et pandl-body, puis le tête-tête peut contenir des titres et des liens. Connectez-vous avec le corps du panneau via le lien.
Étape 3: Vous pouvez constater qu'il y a un id = "accordéon" dans le groupe de panneau, puis il y a un Data-Parent = "# accordéon" dans le lien sous chaque titre ci-dessous.
S'il est supprimé, l'effet est qu'après avoir cliqué sur d'autres liens, le panneau d'origine ne rétrécira plus.
Vous pouvez montrer l'effet du pliage d'une autre manière.
<div style = "margin-top: 140px;"> <bouton type = "bouton" data-toggle = "effondrement" data-target = "# démo"> effondrement simple </utton> <div id = "Demo"> Anim Pariatur Cliche Reprepederit, Enim eiusmod High Life Accusamus Terry Richardson Ad Squid. 3 Wolf Moon Official Aute, Brunch Dolor de skateboard non cupidonat. Camion de nourriture Quinoa Nesciunt Labourum Eiusmod. Brunch 3 Wolf Moon Tempor, Sun Aliqua a mis un oiseau dessus Squid Origin Coffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea PROIENT. AD Vegan Excepteur Butcher Vice Lomo. Leggings occaecat artisanat de bière de bière à la table à la table, synthé esthétique du denim cru nesciunt vous n'avez probablement pas entendu parler d'accusamus travail de travail durable VHS. </div>
usage
Le plugin Fold contrôle les styles à travers plusieurs classes simples
.Collapse masquer le contenu
.Collapse dans Show Content
.Collapseing. Il est ajouté au début de la transition et retiré lorsque il se termine signifie probablement que l'effet de transition sera disponible après l'ajout du pli, puis s'il est supprimé, il se terminera.
Via l'attribut de données
Le simple fait d'ajouter Data-Toggle = "Follapse" et les données-cibles à l'élément de page lui donne la possibilité de contrôler les éléments de page pliants. La propriété Data-ciblement accepte un sélecteur CSS comme objet de contrôle. Assurez-vous d'ajouter une classe d'effondrement à l'élément de page effondré. Si vous souhaitez que l'état par défaut de l'élément de page effondré soit élargi, ajoutez en classe.
Pour ajouter un contrôleur à un ensemble d'éléments de page pliables, ajoutez Data-Parent = "# Selector". Veuillez vous référer à l'exemple ci-dessus.
via javascript
<Button Type = "Button" onClick = "Open ()"> Ouvrir </futton> <Button Type = "Button" OnClick = "MIDE ()"> Fold </ Button> <div id = "Demo"> Anim Pariatur Cliche Reprerederit, Enim Eiusmod High Life Accusamus Terry Richardson Ad Squid. 3 Wolf Moon Official Aute, Brunch Dolor de skateboard non cupidonat. Camion de nourriture Quinoa Nesciunt Labourum Eiusmod. Brunch 3 Wolf Moon Tempor, Sun Aliqua a mis un oiseau dessus Squid Origin Coffee Nulla Assumenda Shoreditch et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea PROIENT. AD Vegan Excepteur Butcher Vice Lomo. Leggings occcucaecat artisanat bière ferme à table, cru denim synthétique nesciunt vous n'avez probablement pas entendu parler d'accusamus de travail durable vhs. </ Div> <div id = "Accordeon" style = "margin-top: 240px;"> <script type = "text / javascript"> $ (function () {$ ("# démo"). Open () {$ ("# Demo"). ENCLAPSE ("Show");} Fonction Hide () {$ ("# Demo"). ENCHAPTY ("Hide");} </ Script>Jetez un œil à l'effet ci-dessus
méthode
Donnez aux éléments de la page une fonction pliable. Accepte un objet facultatif comme argument.
$ ("# démo"). Effondrement ({toggle: false})
De cette façon, les éléments seront élargis lorsqu'ils seront initialisés.
1. Effondrer («basculer») affiche ou cache un élément de page pliable.
2.Collapse ('show') Affiche un élément de page pliable.
3.Collapse ('Hide') cache un élément de page pliable.
événement
Le plugin effondré dans Bootstrap expose un ensemble d'événements qui peuvent être écoutés.
$ ('# démo'). sur ('Hidden.bs.collapse', fonction () {alert (1);})Cela lie les événements cachés à l'élément.