css - power - ¿Es posible hacer una diapositiva modal de Twitter Bootstrap desde un lado o desde abajo en lugar de deslizarse hacia abajo?

plantillas power point

Question

Actualmente, el efecto modal de deslizamiento hacia abajo se realiza al agregar la clase de fade a la div modal. ¿Es posible cambiar el efecto para deslizar desde el lado (o desde la parte inferior) cambiando el css? No pude encontrar ninguna información en línea sobre cómo hacer esto y no sé css suficiente para hacer esto yo mismo.

html:

<div id=''test-modal'' class=''modal fade hide''>
  <div>Stuff</div>
</div>

Answer 1

Bootstrap 3 ahora usa CSS transform translate3d en lugar de transiciones CSS para mejores animaciones usando aceleración de hardware GPU.

Utiliza el siguiente CSS (sans easing)

.modal.fade .modal-dialog {
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}

Aquí está el CSS que puede usar para deslizarse desde el lado IZQUIERDO

.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

Observe el selector negativo. Noté que esto era necesario para evitar que la definición ".modal.in.modal-dialog" interfiera. Nota: No soy un gurú de CSS, así que si alguien puede explicar mejor esto, siéntase libre :)

Cómo deslizarse desde diferentes lados:

• arriba: translate3d(0, -25%, 0)
• abajo: translate3d(0, 25%, 0)
• izquierda: translate3d(-25%, 0, 0)
• derecha: translate3d(25%, 0, 0)

Si desea mezclar y combinar diferentes direcciones de deslizamiento, puede asignar una clase como ''izquierda'' al modal ...

<div class="modal fade left">
    ...
</div>

... y luego enfoca eso específicamente con CSS:

.modal.fade:not(.in).left .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

Fiddle: http://jsfiddle.net/daverogers/mu5mvba0/

BONUS - Podrías ponerte un poco loco y deslizarte en ángulo:

• arriba a la izquierda: translate3d(-25%, -25%, 0)
• arriba a la derecha: translate3d(25%, -25%, 0)
• abajo a la izquierda: translate3d(-25%, 25%, 0)
• abajo a la derecha: translate3d(25%, 25%, 0)

ACTUALIZACIÓN (28/05/15): actualicé el violín para mostrar los ángulos alternativos

Si desea utilizar esto en una plantilla LESS, puede usar el mixin de prefijo de proveedor de BS3 (siempre que esté incluido)

.modal.fade:not(.in) .modal-dialog {
    .translate3d(-25%, 0, 0);
}

Answer 2

Esto es para alguien que está buscando la solución Bootstrap 4 :

HTML

<a class="btn btn-primary" data-toggle="modal" data-target="#modalSidePaneRight">Slide Right Panel</a>

<div class="modal fade modal-right-pane" id="modalSidePaneRight" tabindex="-1" role="dialog" aria-labelledby="sidePaneRightModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-0">
      <div class="modal-header">
        <h5 class="modal-title" id="sidePaneRightModal"><i class="fi fi-calender"></i> Your Modal Title</h5>
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body bg-primary">
        <h1>Your Content</h1>
      </div>
    </div>
  </div>
</div>

SCSS

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add ".modal-left-pane" or ".modal-right-pane" in modal parent div, after class="modal".
*******************************/

// Modal Panel: Right
$header-nav-height: 56px;
$modal-height: calc(100vh - #{$header-nav-height});

.modal{
  &.modal-left-pane,
  &.modal-right-pane {
    .modal-dialog {
      max-width: 380px;
      min-height: $modal-height;
    }

    &.show .modal-dialog {
      transform: translate(0, 0);
    }

    .modal-content {
      min-height: $modal-height;
    }
  }
  &.modal-left-pane {
    .modal-dialog {
      transform: translate(-100%, 0);
      margin: $header-nav-height auto 0 0;
    }
  }

  &.modal-right-pane {
    .modal-dialog {
      transform: translate(100%, 0);
      margin: $header-nav-height 0 0 auto;
    }
  }
}

Answer 3

Esta información no está actualizada. Bootstrap 3 maneja esto de manera diferente ahora. Por favor vea la respuesta actualizada si está usando la versión más nueva .

La transición de "deslizamiento" es, de hecho, manejada por el bootstrap css. En particular, es manejado por esta parte:

// bootstrap.css

.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 50%;
}

Para cambiar la dirección de transición, simplemente agregue (en su propia hoja de estilo, porque el bootstrap css se actualizará en versiones futuras) estos estilos. Estos sobrescribirán los estilos de arranque. Para que el modal se deslice desde la izquierda, intente:

.modal.fade {
  left: -25%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
       -o-transition: opacity 0.3s linear, left 0.3s ease-out;
          transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.fade.in {
  left: 50%;
}​

Trabajando jsfiddle here .

Para hacer la transición de derecha a izquierda, proporcione un gran porcentaje positivo para el modo de transición y cambie el lugar de descanso final del modo a la dirección correspondiente. ej. .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% }; .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

Ejemplo de derecha a izquierda.

Ejemplo de abajo hacia arriba.

Más información sobre CSS Transiciones aquí .