web-dev-qa-db-fra.com

Animer la largeur d'un élément de 0 à 100%, avec celui-ci et son wrapper étant uniquement aussi large que nécessaire, sans largeur prédéfinie, en CSS3 ou jQuery

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

En vol stationnaire .wrapper, c'est l'élément enfant .contents devrait animer de 0px à sa largeur naturelle. Puis, lorsque la souris est supprimée de .wrapper, il devrait revenir à 0px. Le .wrapper L'élément doit être aussi large que nécessaire (permettant .contents pour grandir), donc .wrapper devrait augmenter en largeur et diminuer en largeur au fur et à mesure que .contents Est-ce que. Il ne devrait y avoir aucune largeur définie pour .contents. J'utilise CSS3, mais jQuery pourrait le faire, ça irait.

Le problème: Voir le JSfiddle

  1. .wrapper n'est pas seulement aussi large que nécessaire.
  2. quand .contents grandit, quand il est presque à sa largeur totale, il saute à la ligne suivante
  3. En vol stationnaire de .wrapper, .contents disparaît, alors qu'il devrait s'animer en 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%;
}
<div class="wrapper">
    <span>+</span>
    <div class="contents">These are the contents of this div</div>
</div>
jquerycsscss3css-transitions
50
android.nick

Je pense que je l'ai.

.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%;
}
<div class="wrapper">
    <span class="label">+</span><div class="contents">
        <div class="inner">
            These are the contents of this div
        </div>
    </div>
</div>

Animation à 100% le fait envelopper car la boîte est plus grande que la largeur disponible (100% moins le + et les espaces qui le suivent).

Au lieu de cela, vous pouvez animer un élément interne, dont 100% est la largeur totale de .contents.

48
eyelidlessness

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%;
}
9
chovy

Il a fallu que cela fonctionne en faisant la transition entre le rembourrage et la largeur.

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

<div class='label gray'>+
</div><!-- must be connected to prevent gap --><div class='contents-wrapper'>
    <div class="gray contents">These are the contents of this div</div>
</div>

.gray {
    background: #ddd;
}
.contents-wrapper, .label, .contents {
    display: inline-block;
}
.label, .contents {
    overflow: hidden; /* must be on both divs to prevent dropdown behavior */
    height: 20px;
}
.label {
    padding: 10px 10px 15px;
}
.contents {
    padding: 10px 0px 15px; /* no left-right padding at beginning */
    white-space: nowrap; /* keeps text all on same line */
    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;
}
6
Chris Middleton