web-dev-qa-db-ja.com

要素の幅を0〜100％でアニメーション化します。CSS3またはjQueryで、あらかじめ設定された幅を使用せずに、必要なだけ幅の広いラッパーを使用します。

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

.wrapperにカーソルを合わせると、.contentsの子要素は0pxから自然な幅にアニメーション化されます。次に、マウスを.wrapperから削除すると、アニメーションが戻って0pxに戻ります。 .wrapper要素の幅は、必要なだけ（.contentsが大きくなるように）する必要があるため、.wrapperは、.contentsのように幅が大きくなり、幅が狭くなります。 .contentsには幅を設定しないでください。 CSS3を使用していますが、jQueryで実現できますが、それで問題ありません。

問題：JSfiddleを参照

  1. .wrapperは、必要なだけの幅ではありません。
  2. .contentsが大きくなると、ほぼ全幅になると、次の行にジャンプします
  3. .wrapperからホバリングすると、.contentsは消滅し、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

私はそれを持っていると思います。

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

100%にアニメートすると、ボックスが利用可能な幅（100％から+とそれに続く空白を引いたもの）より大きいため、折り返されます。

代わりに、100%が.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

幅と同様にパディングを移行することで動作するようになりました。

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