¡Bienvenido a Foros Hosting ...!

Aquí encontraras una experiencia comunitaria para aprender todo lo relacionado con hosting.

Encuentra soporte en español para: Web Hosting, Servidores Dedicados, Servidores VPS, Clouds, Seguridad, Programación y muchos más.

Obtén más experiencia como Administrador de Sistemas, Crea tu propia empresa de hosting. Comparte tus conocimientos de forma libre.

¡Regístrate ahora y forma parte de nuestra comunidad!

Aporte Arreglar / ignorar prefers-reduced-motion para Bootstrap 4.x

JesusSuarez

Jesus Suarez
Miembro del equipo
Administradores
9/22/19
137
80
28
Premios
4
Bogotá - CO
cangurohosting.com
  • No puedes parar!
  • Muchos me Gusta!
  • Sigue Publicando!
  • Le gustas a alguien!
Seguidores
1
bootstrap.png
Hace tiempo que soy desarrollador frontend. realizo plantillas y cosas asi, uso mucho como librería css bootstrap.

de un tiempo para acá me he dado cuenta que bootstrap 4 desactiva los efectos de los modals y transiciones de botones.

esto es debido a que implementaron algo llamado: prefers-reduced-motion

Por favor, Acceder o Registro para ver las URLs y el contenido!


esto es: Movimiento reducido, Bootstrap incluye soporte para la prefers-reduced-motionfunción de medios . En los navegadores / entornos que permiten al usuario especificar su preferencia por el movimiento reducido, la mayoría de los efectos de transición CSS en Bootstrap (por ejemplo, cuando se abre o cierra un diálogo modal, o la animación deslizante en carruseles) se desactivará.

Me rompi literalmente la cabeza para encontrar una manera de solucionarlo, (no es sencillo si lo haces manual porque son varias transiciones que hay que reparar para que funcione).

Así que me di la tarea de ver si alguien ya lo habia solucionado y se los comparto con mucho gusto.

simplemente agreguen el siguiente código CSS en su archivo style.css o custom.css

Código:
		.fade {
    transition:opacity 0.15s linear !important;
}
.collapsing {
    transition:height 0.35s ease !important;
}
.custom-switch .custom-control-label::after {
    transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-transform 0.15s ease-in-out !important;
    transition:transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
    transition:transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-transform 0.15s ease-in-out !important;
}
.custom-range::-webkit-slider-thumb {
    transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.custom-range::-moz-range-thumb {
    transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.custom-range::-ms-thumb {
    transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.custom-control-label::before,.custom-file-label,.custom-select {
    transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.badge {
    transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.progress-bar {
    transition:width 0.6s ease !important;
}
.progress-bar-animated {
    -webkit-animation:progress-bar-stripes 1s linear infinite !important;
    animation:progress-bar-stripes 1s linear infinite !important;
}
.modal.fade .modal-dialog {
    transition:-webkit-transform 0.3s ease-out !important;
    transition:transform 0.3s ease-out !important;
    transition:transform 0.3s ease-out,-webkit-transform 0.3s ease-out !important;
}
.carousel-item {
    transition:-webkit-transform 0.6s ease-in-out !important;
    transition:transform 0.6s ease-in-out !important;
    transition:transform 0.6s ease-in-out,-webkit-transform 0.6s ease-in-out !important;
}
.carousel-fade .carousel-item {
    transition-property: opacity !important;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    transition: 0s 0.6s opacity !important;
}

.carousel-control-prev,.carousel-control-next {
    transition:opacity 0.15s ease !important;
}
.carousel-indicators li {
    transition:opacity 0.6s ease !important;
}
.form-control {
    transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
.btn {
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
}
		
De esta manera podrás seguir obteniendo todos los efectos de bootstrap de las versiones anteriores en las versiones nuevas.

El codigo original se puede encontrar este git:
Por favor, Acceder o Registro para ver las URLs y el contenido!


Espero que les sirva. :)
 

Arriba Pie