jquery - right - data-toggle bootstrap

Twitter Bootstrap Collapse plugin Dirección-Horizontal en lugar de Vertical

Question

¿Hay alguna forma de colapsar el complemento Collapse de Bootstrap horizontalmente en lugar de verticalmente? Al mirar el código, esta habilidad no parece estar incorporada, pero espero que me esté perdiendo algo ...

Cualquier ayuda será apreciada. ¡Gracias!

Answer 1

Actualizado 2018

Ninguna de las respuestas existentes funcionó para mí. Para hacer horizontal la animación de colapso en las últimas versiones, debe establecer tanto la transición al ancho como la visibilidad .

Bootstrap 3.3.7

.collapse {
  visibility: hidden;
}
.collapse.in {
  visibility: visible;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

3.x demo

Bootstrap 4.x

La transición de colapso horizontal de Bootstrap 4 es básicamente la misma, se espera que la clase visible ahora sea .show lugar de .in . También puede ayudar a especificar display: block ya que muchos elementos se muestran ahora: flex.

.collapse.show {
  visibility: visible;
}

4.x demo
4.x demostración de la barra lateral

Answer 2

Buenas respuestas aquí, pero tuve que hacer algunas modificaciones para una transición más limpia y bidireccional:

.collapse.width, .collapsing {
    height: 25px; /* depending on your element height */
    overflow: hidden;
    -webkit-transition: width 0.25s ease;
    -moz-transition: width 0.25s ease;
    -o-transition: width 0.25s ease;
    transition: width 0.25s ease;
}

Establecer una altura fija también ayudó a evitar que la página "saltara" cuando el elemento colapsó y se expandió.

Answer 3

Con bootstrap 3.0.0, solo necesita agregar la clase de ancho al elemento de destino y luego el siguiente CSS si desea que se active.

.collapse.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

Answer 4

Creo que translateX (-100%) y translateX (0) podrían ser el camino a seguir en lugar de animar el ancho ya que usa la aceleración de hardware correctamente cuando es compatible

Answer 5

Descubrí cómo hacer esto muy fácilmente sin modificar ni agregar ningún javascript.

Primero defines el siguiente CSS después de todo el Twitter Bootstrap CSS:

.collapse {
  height: auto;
  width: auto;
}

.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.collapse.width {
  position: relative;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.collapse.in.width {
  width: auto;
}

.collapse.in.height {
  height: auto;
}

A continuación, en el elemento de destino (donde define la clase .collapse ), necesita agregar la clase .width o .height dependiendo de qué propiedad desee animar.

Finalmente, debe envolver el contenido del elemento de destino y definir explícitamente su ancho si se anima el ancho. Esto no es necesario si se anima la altura.

Puede encontrar un ejemplo de trabajo aquí -> http://jsfiddle.net/ud3323/ZBAHS/

Answer 6

En mi versión de bootstrap 3 (usando LESS), simplemente tuve que incluir esto en mi archivo global menos:

.collapsing.width  { 
    width: 0;
    height: auto;
    .transition(width 0.35s ease);
}

La clase adicional tiene que ser de width ya que el collapse.js busca esta clase para la transición. Intenté las sugerencias de todos los demás, pero no funcionaron para mí.

Answer 7

No parece ser una opción para ese complemento en particular. Parece que puede necesitar modificarlo o conectarlo de alguna manera para que funcione de esa manera ...

Después de mirar un poco el archivo JS noté un par de cosas. Lo primero es que parece que podría estar usando bootstrap-transition.js , que parece estar usando transiciones CSS3. Entonces podría ser posible escribir una nueva transición. Aunque no estoy 100% seguro de que así sea como funciona.

opcion uno

Mi sugerencia sería hurgar en el archivo de complemento bootstrap-collapse.js por un tiempo y ver si puede averiguar cómo está funcionando.

En particular, me gustaría ver esta parte ... bootstrap-carrusel.js

this.$element[dimension](0)
this.transition(''addClass'', $.Event(''show''), ''shown'')
$.support.transition && this.$element[dimension](this.$element[0][scroll])

Parece que .transition es una devolución de llamada de bootstrap-transition.js

Opción dos

Mi segunda sugerencia sería escribir algo tuyo.

Mi respuesta

Y finalmente, mi respuesta es que al mirar la documentación de arranque, no parece ser una opción.

Alguna información adicional:

Este sitio web parece estar haciendo cosas similares con las transiciones CSS3. http://ricostacruz.com/jquery.transit/