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
.wrapper
n'est pas seulement aussi large que nécessaire..contents
grandit, quand il est presque à sa largeur totale, il saute à la ligne suivante.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>
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
.
.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%;
}
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;
}