web-dev-qa-db-fra.com

L'animation de réduction d'amorçage n'est pas fluide

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo </a>
    <textarea class="form-control collapse" id="collapseOne" rows="4"></textarea>
</div>

<div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle </a>
    <input type="text" class="form-control collapse" id="collapseTwo">
</div>

Le problème est que lorsque vous cliquez sur l'onglet addInfo, vous pouvez trouver un saut dans l'expansion du text_area, à savoir que l'animation n'est pas fluide.

jquerytwitter-bootstraptwitter-bootstrap-3
42
shapeare

Si quelqu'un d'autre rencontre ce problème, comme je viens de le faire, la solution consiste à envelopper le contenu que vous souhaitez réduire dans une variable div et à réduire le div de l'emballage plutôt que le contenu lui-même.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo</a>
    <div id="collapseOne" class="collapse">
        <textarea class="form-control" rows="4"></textarea>
    </div>
</div>

<div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle</a>
    <input type="text" class="form-control collapse" id="collapseTwo">
</div>

85
Philip Stratford

La secousse se produit lorsque la div parent ".collapse" est complétée. 

Le rembourrage va sur la div de l'enfant, pas le parent. jQuery anime la hauteur, pas le remplissage.

Exemple: 

  <div class="form-group">
       <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ addInfo</a>
       <div class="collapse" id="collapseOne" style="padding: 0;">
          <textarea class="form-control" rows="4" style="padding: 20px;"></textarea>
       </div>
  </div>

  <div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">+ subtitle</a>
    <input type="text" class="form-control collapse" id="collapseTwo">
  </div>

Fiddle Afficher les deux

J'espère que cela t'aides.

47
CR Rollyson

Ajout à la réponse @CR Rollyson,

Dans le cas où vous avez une div pliable qui a un attribut min-height, cela provoquera également la secousse Essayez de supprimer cet attribut de la div directement compressible. Utilisez-le dans la division enfant de la division repliable.

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ Not Jerky</a>
    <div class="collapse" id="collapseOne" style="padding: 0;">
        <textarea class="form-control" rows="4" style="padding: 20px;">No padding on animated element. Padding on child.</textarea>
    </div>
</div>

Fiddle

4
Yogesh Kumar Gupta

Je pense qu'il peut y avoir plusieurs situations qui provoquent des saccades. Dans mon exemple, le problème concerne la marge inférieure de l'enfant non animé (même si le parent animé n'a pas de marge/remplissage). Lorsque vous supprimez la marge, l'animation devient lisse.

<div class="form-group">
    <a for="collapseJerky" data-toggle="collapse" href="#collapseJerky" aria-expanded="true" aria-controls="collapseJerky">+ Jerky</a>
    <div class="collapse" id="collapseJerky" style="margin:0; padding: 0;">
        <textarea class="form-control" rows="4" style="margin-bottom: 20px;">No margin or padding on animated element. Margin on child.</textarea>
    </div>
</div>
<div class="form-group">
    <a data-toggle="collapse" href="#collapseNotJerky" aria-expanded="true" aria-controls="collapseNotJerky">+ Not Jerky</a>
    <div class="collapse" id="collapseNotJerky" style="margin:0 padding: 0;">
        <textarea class="form-control" rows="4" style="margin-bottom: 0;">No margin or padding on animated element or on child.</textarea>
    </div>
</div>
<p>
    Moles and trolls, moles and trolls, work, work, work, work, work. We never see the light of day. This is just content below the "Not Jerky" to show that the animation is smooth.
</p>

Fiddle

3
joeshmoe301

La mienne s'est lissée non pas en enveloppant chaque enfant mais en enveloppant tout le balisage avec un div assistant . Comme ça:

<div class="accordeonBigWrapper">
    <div class="panel-group accordion partnersAccordeonWrapper" id="partnersAccordeon" role="tablist" aria-multiselectable="false">
         accordeon markup inside...
    </div>
</div>
2
vaskort

Bien que cela ait été réponse https://stackoverflow.com/a/28375912/5413283 , et en ce qui concerne le rembourrage, il ne figure pas dans la réponse originale mais ici https://stackoverflow.com/a/33697157/ 5413283 .
J'ajoute simplement ici pour une présentation visuelle et un code plus propre.

Testé sur Bootstrap 4 ✓

Créez un nouveau parent et ajoutez la réduction d'amorçage. Supprimer les classes de la textarea

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->

Si vous voulez avoir des espaces autour, enveloppez textarea avec padding. N'ajoutez pas margin, le problème est le même.

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <div class="py-4"> <!-- padding for textarea -->
        <textarea class="form-control" rows="4"></textarea>
    </div> <!-- // padding for textarea -->
</div> <!-- // bootstrap class on parent -->

Testé sur Bootstrap 3 ✓

Identique à bootstrap 4. Enveloppez la textare avec la classe collapse.

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->

Et pour paddingBootstrap 3 n'a pas de classes p- * comme Bootstrap 4. Donc, vous devez créer le vôtre. N'utilisez pas padding cela ne fonctionnera pas, utilisez margin.

#collapseOne textarea {
    margin: 10px 0 10px 0;
}
0
TheHive

Ne définissez pas de hauteur sur la balise .collapse. Cela affecte l'animation, si la hauteur est remplacée par css; il ne s'animera pas correctement.

0
DDT