Twitter Bootstrap Effondrement plugin Sens—Horizontal au lieu de Vertical

Est-il un moyen pour réduire le Bootstrap Effondrement plugin à partir de l'horizontale au lieu de verticale? En regardant le code de cette capacité ne semble pas être intégrée, mais j'espère que je suis juste en manque de quelque chose...

Toute aide sera grandement appréciée. Merci!

InformationsquelleAutor Roy Daniels | 2012-09-19
  1. 22

    J'ai trouvé comment faire cela très facilement, sans modification ou ajout de code javascript.

    Vous définissez d'abord le code CSS suivant après tout 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;
}

    Prochain, sur l'élément cible (qui permet de définir le .collapse classe), vous devez ajouter la classe .width ou .height selon les biens que vous souhaitez animer.

    Enfin, vous doit envelopper le contenu de l'élément cible et définir explicitement sa largeur si l'animation de la largeur. Ce n'est pas nécessaire si l'animation de la hauteur.

    Vous pouvez trouver un exemple ici -> http://jsfiddle.net/ud3323/ZBAHS/

    InformationsquelleAutor Roy Daniels
  2. 21

    Avec bootstrap 3.0.0, vous avez juste besoin d'ajouter de la largeur de la classe de l'élément cible, puis le code css suivant si vous souhaitez animer. 

    .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;
}
    • Merci - j'avais à l'origine utilisé Roy Daniels est la version ci-dessus et a été à la recherche pour voir si il y avait un moyen plus simple de le faire dans la version 3.0 maintenant, nous avons mis à niveau.
    • Cela ne semble pas fonctionner pour moi. Je suis à l'aide de plates-interface utilisateur sur le haut de bootstrap.
    • Est-il un jsfiddle?
    InformationsquelleAutor flipside
  3. 6

    Dans ma version de bootstrap 3 (en utilisant MOINS), j'ai simplement dû à l'inclure dans ma mondial des moins de de fichier:

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

    La catégorie " extra a être width depuis le collapse.js cherche cette classe pour la transition. J'ai essayé tous les autres suggestions, mais il ne fonctionne pas pour moi.

    • Cela a fonctionné pour moi, mais depuis moins mon fichier n'est pas compilé avec bootstrap, j'ai dû définir le .transition mixin avant de l'utiliser: .transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; }
    InformationsquelleAutor J_A_X
  4. 5

    Mis à jour en 2019

    Bootstrap 4.x

    Bootstrap 4 horizontal effondrement transtion est fondamentalement la même, attendu la classe visible est maintenant .show au lieu de .in. Il peut également aider à préciser display:block car de nombreux éléments sont maintenant display: flex.

    .collapse.show {
  visibility: visible;
}

    4.x démo

    4.x barre latérale de démonstration

    Voir aussi:

    Bootstrap menu horizontal effondrement de sidemenu

    Bootstrap - Comment faites glisser la barre de navigation de gauche, au lieu de haut

    Bootstrap 3.3.7 (réponse originale à cette question)

    Aucune des réponses a fonctionné pour moi. Pour faire de l'animation de réduction horizontale dans les dernières versions, vous devez indiquer à la fois la transition à la largeur, et également utiliser visibilité.

    .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 démo

    • Comment faire accordéon horizontal comme en vertical et en ouvrir un à la fois?
    • J'ai quelque chose de travail basé sur cet exemple, mais lorsque l'élément est la réduction à l'horizontale, j'en vois le mot de l'emballage. Je ne vois pas ce qui l'empêche dans ces exemples, ce qui me manque?
    InformationsquelleAutor Zim
  5. 4

    Il ne semble pas être une option pour que le plugin particulier. Il semble que vous devrez le modifier ou le crochet en quelque sorte de l'obtenir pour fonctionner de cette façon...

    Après avoir regardé le fichier JS pour un peu, j'ai remarqué un couple de choses. Première chose, c'est qu'il ressemble peut-être à l'aide de bootstrap-transition.js ,qui semble être à l'aide de transitions CSS3. Il pourrait donc être possible d'écrire une nouvelle transition. Je ne suis pas certain à 100% si c'est la façon dont il fonctionne bien.

    Option Un

    Ma suggestion est de fouiner dans les bootstrap-collapse.js fichier de plugin pour un certain temps et voir si vous pouvez comprendre comment il fonctionne.

    En particulier, je regarde cette partie... bootstrap-carousel.js

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

    Il ressemble .transition est un rappel de l' bootstrap-transition.js

    Option Deux

    Ma deuxième suggestion serait de simplement écrire quelque chose de votre propre.

    Ma Réponse

    Et enfin ma réponse est qu'en regardant le bootstrap, documentation, il ne semble pas être une option.

    Quelques informations supplémentaires:

    Ce site semble être en train de faire les mêmes choses avec des transitions CSS3.
    http://ricostacruz.com/jquery.transit/

    • C'est le long des lignes de ce que je pensais aussi. Il serait bien de tirer parti de ce qui est déjà dans le Bootstrap, donc je pense que je vais essayer de créer mon propre transition en tirant parti de bootstrap-transition.js. Merci pour vos commentaires. Je l'apprécie vraiment!
    • Pas de problème.. Bonne chance avec votre code!
    InformationsquelleAutor Kris Hollenbeck
  6. 0

    je pense que translateX(-100%) et translateX(0) pourrait être le chemin à parcourir plutôt que de l'animation de la largeur utilise l'accélération matérielle correctement lorsque pris en charge

    InformationsquelleAutor Adam Spence
  7. 0

    Bonnes réponses ici, mais j'ai dû faire quelques modifications pour un nettoyant, dans les deux sens de la transition:

    .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;
}

    Définition d'une hauteur fixe également contribué à prévenir la page "saut" que l'élément développée et réduite.

    InformationsquelleAutor Ixalmida