Animer un élément de la largeur de 0 à 100%, et en plus c'est wrapper être aussi large que dont ils ont besoin pour être, sans un pré-réglage de la largeur, en CSS3 jQuery

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

Lorsque le curseur de .wrapper, c'est l'élément enfant .contents devrait animer de 0px à il est naturel de largeur. Puis, quand la souris est retiré de .wrapper, il devrait animer l'arrière en bas à 0px. Le .wrapper élément ne doit être aussi large qu'il doit être (permettant .contents de croître), de sorte .wrapper devrait se développer en largeur et rétrécissent la largeur .contents n'. Il devrait y avoir pas de définir la largeur de la .contents. Je suis à l'aide de CSS3, mais il peut être accompli dans jQuery, ce serait bien.

Le problème:
Voir le JSfiddle

.wrapper n'est pas aussi large qu'il doit être.
quand .contents grandit, quand il est presque à la totalité de la largeur, il saute à la ligne suivante
Lorsque vous vous déplacez de .wrapper, .contents s'évanouit, quand il devrait animer le bas pour 0px

CSS:

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

HTML:

<div class="wrapper">
    <span>+</span>
    <div class="contents">These are the contents of this div</div>
</div>

#3 est simple: déplacez votre transition des styles de .contents.

InformationsquelleAutor android.nick | 2011-10-22

48

Je pense que je l'ai.

CSS:
```
.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%;
}
```
HTML:
```
<div class="wrapper">
    <span class="label">+</span><div class="contents">
        <div class="inner">
            These are the contents of this div
        </div>
    </div>
</div>
```
L'animation à 100% causes de conclure parce que la boîte est plus grande que la largeur disponible (100% moins les + et les espaces qui la suit).

Au lieu de cela, vous pouvez animer un à l'intérieur de l'élément, dont 100% est la largeur totale de .contents.
- SI proche, la dernière chose à accomplir est d'obtenir .wrapper pour obtenir plus grand et moins large que nécessaire, j'ai essayé un peu mais je ne peux pas l'obtenir. C'est le n ° 1 ci-dessus dans la liste, peut-être que je n'ai pas expliqué que l'un très bien. Si l'emballage ne doivent pas être plus grand que le "+" avec l'égalité de rembourrage sur tous les côtés. Puis .wrapper pousse en largeur comme .contents n'. Je pensais que cela allait être super simple à faire, mais j'ai eu beaucoup de problèmes avec elle.
- cela fonctionne comme vous le souhaitez, MAIS, je ne peux pas comprendre le flotteur/l'alignement de la partie... vous allez voir: jsfiddle.net/wxh6kc71
- hey c'est encore mieux je pense! jsfiddle.net/9vezn2g7
- et enfin, en voici une qui est également conforme à la largeur du contenu / élargit le wrapper de la largeur de la table des matières... cependant, les transitions sur la largeur DOIT avoir une valeur numérique sinon, ils ne pas les animer. Donc, sauf si vous êtes prêt à utiliser JavaScript pour l'animation, vous êtes hors de la chance là-bas. jsfiddle.net/62dtk8mg
- Mais .wrapper's la largeur n'est pas 0; .wrapper's la largeur est toujours de .contents's largeur sans aucun contenu à l'intérieur. Pas une grosse affaire. Comment faire .wrapper grandir et rétrécir avec .contents. Avec CSS. C'est la question!
- Voici une fourchette pour faire apparaître le texte de la droite vers la gauche, au cas où quelqu'un se demande:) le truc, c'est direction:rtl; jsfiddle.net/18astcoo
- FLIP Principe -> codepen.io/birjolaxew/stylo/BjyQzR
InformationsquelleAutor 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%;
}

Presque, il ne devrait animer une largeur qui est aussi large que le contenu n'est pas plus que cela. Obtenir tout cela fonctionne à merveille, et est plus difficile que je ne le pensais.

InformationsquelleAutor chovy

Réussi à le faire fonctionner par la transition de rembourrage ainsi que 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;
}

Wrapper a la largeur. Elle occupe l'espace de toute façon, même si il n'y a pas de contenu en elle.
Middleton, pour les coups de pied, j'ai voulu essayer de droite à gauche, mais ne viens pas avec de la bonne façon encore.

InformationsquelleAutor Chris Middleton

-2

Je n'ai pas été en mesure de le faire fonctionner sans spécifier la largeur, mais la suite css travaillé

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

.contents {
    background: #c3c;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    visibility: hidden;
    width: 1px;
    -webkit-transition: width 1s ease-in-out, visibility 1s linear;
    -moz-transition: width 1s ease-in-out, visibility 1s linear;
    -o-transition: width 1s ease-in-out, visibility 1s linear;
    transition: width 1s ease-in-out, visibility 1s linear;
}

.wrapper:hover .contents {
    width: 200px;
    visibility: visible;
}

Je ne suis pas sûr que vous serez en mesure de le faire fonctionner sans réglage de largeur sur elle.

InformationsquelleAutor Nalum

Vous devez vous connecter pour publier un commentaire.