web-dev-qa-db-fra.com

Ouverture et fermeture en fondu d'un modal Bootstrap 3

J'ai donné à mon Bootstrap 3 modal une classe de «fondu», mais le modal ne «fondu» pas comme prévu. Il semble glisser d’en haut plutôt que de s’affaiblir.

Modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Bouton de déclenchement:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Pour montrer un exemple de l'effet d'un fondu, j'ai créé cet exemple: http://jsfiddle.net/spQp5/

Comment puis-je obtenir mon modal à «fondu» et sortir comme ça?

javascriptjqueryhtmlcsstwitter-bootstrap-3
8
henrywright

Les modaux d'amorçage se fondent par défaut. Peut-être que cela s'estompe trop rapidement pour que vous puissiez le voir? Si vous regardez le fichier css, vous pouvez voir qu’ils ont des transitions configurées pour le faire apparaître en fondu pendant 0,15 seconde:

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

Le fait de passer le fade in à la seconde, à des fins de démonstration, peut vous indiquer qu’il s’apparaît en fait.

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
8
david

Les transitions sont dans le css et font que le modal s'anime et glisse vers le bas. Si vous utilisez LESS, vous pouvez modifier ces lignes dans modal.less pour obtenir le comportement souhaité à l'aide des mixins de transition fournis dans les mixins ou composant-animations.less (ou le vôtre):

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate(0, -25%);
    .transition-transform(~"0.3s ease-out");
  }
  &.in .modal-dialog { .translate(0, 0)}

Si vous n'utilisez ni LESS ni le port Sass officiel, vous pouvez simplement tirer parti du comportement en cascade des feuilles de style et ajouter votre remplacement à un fichier CSS personnalisé chargé après le fichier bootstrap.css. 

 .modal.fade .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0); // IE9 only
          transform: translate(0, 0);

 }
10
jme11

Violon pour votre code: http://jsfiddle.net/KqXBM/

Vous faites référence à la méthode fadeOut de jQuery, qui n’est pas ce que fait la classe Bootstrap fade. Si vous souhaitez obtenir cet effet, ne vous fiez pas aux bibliothèques de BS et utilisez jQuery.

0
punund