Animer la largeur d'un élément de 0 à 100 %, avec lui et son conteneur ne prenant que la largeur nécessaire, sans largeur prédéfinie, en CSS3 ou jQuery

Question

http://jsfiddle.net/nicktheandroid/tVHYg/

En survolant .wrapper, l'élément enfant .contents devrait s'animer de 0px à sa largeur naturelle. Puis lorsque la souris est retirée de .wrapper, il devrait s'animer de nouveau vers 0px. L'élément .wrapper devrait seulement être aussi large qu'il en a besoin (permettant à .contents de grandir), donc .wrapper devrait grandir en largeur et rétrécir en largeur comme le fait .contents. Il ne devrait pas y avoir de largeur définie pour .contents. J'utilise CSS3, mais cela pourrait être fait avec jQuery, cela serait bien.

Le problème : Voir le JSfiddle

1. .wrapper n'est pas seulement aussi large qu'il en a besoin.
2. quand .contents grandit, lorsqu'il est presque à sa pleine largeur, il saute en bas à la ligne suivante

3. En sortant le curseur de .wrapper, .contents disparaît, alors qu'il devrait s'animer vers 0px

   .wrapper { display: inline-block;

   height: 20px;
   width: auto;
   
   padding:10px;
   
   background:#DDD;

   }

   .contents { display:inline-block;

   width:0%;
   
   white-space:nowrap;
   overflow:hidden;
   
   background:#c3c;

   }

   .wrapper:hover .contents { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out;

   width:100%;

   }

   +
   Voici le contenu de cette div

Answer 1

Je crois que j'ai compris.

.wrapper {
    background:#DDD;
    display:inline-block;
    padding: 10px;
    height: 20px;
    width:auto;
}

.label {
    display: inline-block;
    width: 1em;
}

.contents, .contents .inner {
    display:inline-block;
}

.contents {
    white-space:nowrap;
    margin-left: -1em;
    padding-left: 1em;
}

.contents .inner {
    background:#c3c;
    width:0%;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

.wrapper:hover .contents .inner {

    width:100%;
}

    +

            Voici le contenu de cette div

En animant vers 100%, cela provoque un retour à la ligne car la boîte est plus grande que la largeur disponible (100% moins le + et l'espace blanc qui suit).

À la place, vous pouvez animer un élément interne, dont le 100% est la largeur totale de .contents.

Answer 2

http://jsfiddle.net/tVHYg/5/

.wrapper {
    background:#DDD;
    padding:1%;
    display:inline;
    height:20px;
}

span {
    width: 1%;
}

.contents {
    background:#c3c;
    overflow:hidden;
    white-space:nowrap;
    display:inline-block;
    width:0%;
}

.wrapper:hover .contents {
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;

    width:90%;
}

Answer 3

Une réponse tardive, mais je pense que celle-ci fonctionne comme requis dans la question :)

Celui-ci utilise z-index et position absolute, et évite le problème que la largeur de l'élément conteneur ne grandit pas en transition.

Vous pouvez ajuster la marge et le rembourrage du texte selon vos besoins, et le "+" peut être changé en icônes de la police Font Awesome si nécessaire.

body {
  font-size: 16px;
}

.container {
  height: 2.5rem;
  position: relative;
  width: auto;
  display: inline-flex;
  align-items: center;
}

.add {
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  background: #2794A5;
  border-radius: 20px;
  height: 100%;
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
}

.text {
  white-space: nowrap;
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0;
  color: #fff;
  overflow: hidden;
  transition: 0.3s all ease;
  background: #2794A5;
  height: 100%;
  display: flex;
  align-items: center;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-left: 20px;
  padding-left: 20px;
  cursor: pointer;
}

.container:hover .text {
  width: 100%;
  padding-right: 20px;
}

  +
  Ajouter un nouveau client

Answer 4

Je l'ai fait fonctionner en effectuant une transition sur le padding ainsi que sur la largeur.

JSFiddle: http://jsfiddle.net/tuybk748/1/

+

    Voici le contenu de cette div

.gray {
    background: #ddd;
}
.contents-wrapper, .label, .contents {
    display: inline-block;
}
.label, .contents {
    overflow: hidden; /* doit être présent sur les deux divs pour éviter un comportement de menu déroulant */
    height: 20px;
}
.label {
    padding: 10px 10px 15px;
}
.contents {
    padding: 10px 0px 15px; /* pas de padding à gauche et à droite au début */
    white-space: nowrap; /* garde le texte sur la même ligne */
    width: 0%;
    -webkit-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
        padding-right 1s ease-in-out;
    -moz-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
        padding-right 1s ease-in-out;
    -o-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
        padding-right 1s ease-in-out;
    transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
        padding-right 1s ease-in-out;
}
.label:hover + .contents-wrapper .contents {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

Answer 5

Veuillez vérifier le snippet suivant

 /* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136, 155, 166, 0.4);

}

.lwb-col--link {
    font-weight: 500;
  position: relative;
  display: inline-block;
}
.lwb-col--link::after{
    border-bottom: 2px solid;
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;

}
.lwb-col--link::before{
    border-bottom: 2px solid;
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #57B0FB;
    transform: scaleX(0);

}
.lwb-col:hover .lwb-col--link::before {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(1);
    transform-origin: left center;
}

  Webdesign
  Augmentez votre visibilité en ligne avec un design web individuel et professionnel. Une structure de code organisée, une optimisation SEO parfaite et des années d'expérience parlent pour nous.
En savoir plus