angular-ui - tabset - ngbtooltip

Desactiva la animación, modal, angular-ui

Question

¿Es posible desactivar la animación de la directiva modal en angular-ui? http://angular-ui.github.io/bootstrap/

No se puede encontrar ninguno en las opciones. ¿Debo modificar la fuente? ¿O hay alguna mejor práctica cuando quieres personalizar?

Answer 1

Actualmente, las clases de arranque están incluidas en la directiva y deben ser reemplazadas. Si desea evitar esa "deriva" vertical en la posición de la ventana modal, coloque las siguientes 2 clases en su 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);
}

Lo que estarías logrando aquí es la negación de las traducciones existentes. No es ideal, sin embargo, hará el truco.

Answer 2

No tengo una respuesta completa, pero estoy teniendo un problema similar y pensé que entraría. Sé que esto solía ser posible en angular-ui / bootstrap 0.5. Puede haber cambios bruscos en 0.6, y estoy tratando de encontrar una respuesta, pero falta bastante documentación.

Here está el ejemplo dado en 0.5. Observe que puede establecer opciones como backdropFade pero no puedo encontrar el equivalente en 0.6. Puede tener algo que ver con eliminar $dialogProvider .

Answer 3

Una manera fácil de desactivar la animación es agregar estilos importantes al modal.

Para todos los Modals

Puedes hacer eso globalmente para todos los modales con esta clase de CSS (ponlo en cualquier lugar de tu CSS):

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

Eliminará la animación de "deslizamiento desde la parte superior" y también la animación de opacidad. Personalmente, prefiero eliminar solo el primero y usar solo la parte superior: 25%! Importante;

También puede eliminar la animación de fondo globalmente usando esta clase (colóquela en cualquier lugar de su CSS):

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

Para un modal específico

Puede eliminar las animaciones de un modal específico utilizando windowClass param.

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

Usando windowClass:

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

Answer 4

animación (Tipo: boolean , Predeterminado: true ) - Establézcalo en false para desactivar las animaciones en un nuevo modal / fondo. No alterna animaciones para modales / telones de fondo que ya se muestran.

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