web-dev-qa-db-fra.com

Désactiver l'animation, modale, angulaire-ui

Est-il possible de désactiver l'animation de la directive modale dans angular-ui? http://angular-ui.github.io/bootstrap/

Je n'en trouve pas dans les options. Dois-je modifier la source? Ou existe-t-il une meilleure pratique lorsque vous souhaitez personnaliser?

angular-uiangular-ui-bootstrap
31
Joe

Actuellement, les classes bootstrap sont incorporées dans la directive et doivent être remplacées. Si vous voulez empêcher cette dérive verticale en position de la fenêtre modale, placez les 2 classes suivantes dans votre css :

.modal.fade {
  opacity: 1;
}

.modal.fade .modal-dialog, .modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

Ce que vous accomplirez ici, c'est la négation des traductions existantes. Pas idéal, cependant fera l'affaire.

34
beauXjames

animation (Type: boolean, Par défaut: true) - Réglez sur false pour désactiver les animations sur le nouveau modal/backdrop. Ne bascule pas les animations pour les modaux/fonds d'écran déjà affichés.

var modalInstance = $uibModal.open({
  animation: false
15
Mo.

Un moyen simple de désactiver l'animation consiste à ajouter ! Important styles au modal.

Pour tous les modaux

Vous pouvez le faire globalement pour tous les modaux avec cette classe CSS (mettez-le n'importe où dans votre css):

.modal {
   top: 25% !important;
   opacity: 1 !important;
}

Il éliminera l'animation "slide from top" ainsi que l'animation d'opacité. Personnellement, je préfère éliminer uniquement le premier et utiliser uniquement haut: 25%! Important;

Vous pouvez également éliminer l'animation de toile de fond globalement en utilisant cette classe (mettez-la n'importe où dans votre css):

.modal-backdrop {
   opacity: 0.8 !important;
}

Pour un modal spécifique

Vous pouvez éliminer les animations d'un modal spécifique en utilisant le paramètre windowClass.

.no-animation-modal {
  top: 25% !important;
  opacity: 1 !important;
}

Utilisation de windowClass:

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  windowClass: 'no-animation-modal'
});
7
guya

Je n'ai pas de réponse complète, mais j'ai un problème similaire et j'ai pensé que je ferais sonner. Je sais que cela était possible dans angular-ui/bootstrap 0.5. Il y a peut-être des changements de rupture dans 0.6, et j'essaie de trouver une réponse, mais la documentation manque assez.

Ici est l'exemple donné en 0.5. Notez que vous pouvez définir des options comme backdropFade mais je ne trouve pas l'équivalent en 0.6. Pourrait avoir quelque chose à voir avec la suppression de $ dialogProvider .

0
Kenjamin

Ce qui suit fonctionne bien pour moi, quel que soit le animation: false ou animation: true:

<style>
        .modal.fade {
            opacity: 1;
        }

        .modal.fade .modal-dialog, .modal.in .modal-dialog {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .modal-backdrop {
            opacity: 0.8 !important;
        }

</style>
0
Raniys