动画元素的宽度从 0 到 100%，它和它的包装器只有他们需要的宽度，没有预设宽度，在 CSS3 或 jQuery 中

Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

提问by android.nick

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

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

When hovering .wrapper, it's child element .contentsshould animate from 0pxto it's natural width. Then when the mouse is removed from .wrapper, it should animate back down to 0px. The .wrapperelement should only be as wide as it needs to be (allowing .contentsto grow), so .wrappershould grow in width and shrink in width as .contentsdoes. There should be no set width for .contents. I'm using CSS3, but it could be accomplished in jQuery, that would be fine.

当悬停时.wrapper，它的子元素.contents应该从0px它的自然宽度开始动画化。然后当鼠标从 中移除时.wrapper，它应该动画回到0px。该.wrapper元件应仅一样宽，它需要被（允许.contents生长），所以.wrapper应在宽度成长和收缩宽度为.contents一样。不应该设置宽度.contents。我正在使用 CSS3，但它可以在 jQuery 中完成，那很好。

The problem:See the JSfiddle

问题：见JSfiddle

1. .wrapperis not only as wide as it needs to be.
2. when .contentsgrows, when it's almost at it's full width, it jumps down to the next line
3. When hovering off of .wrapper, .contentsvanishes, when it should animate down to 0px

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>

采纳答案by eyelidlessness

I think I've got it.

我想我已经明白了。

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

Animating to 100%causes it to wrap because the box is bigger than the available width (100% minus the +and the whitespace following it).

动画 to100%导致它换行，因为框大于可用宽度（100% 减去+和它后面的空格）。

Instead, you can animate an inner element, whose 100%is the total width of .contents.

相反，您可以为内部元素设置动画，其100%总宽度为.contents.

回答by chovy

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

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

回答by Chris Middleton

Got it to work by transitioning the padding as well as the width.

通过转换填充和宽度来让它工作。

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

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

回答by tanvi korgaonkar

Please check following snippet

请检查以下代码段

 /* 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;
}

<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur, sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

回答by Nalum

I haven't been able to get it to work without specifying a width but the following cssworked

我无法在不指定宽度的情况下使其工作，但以下css有效

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

I'm not sure you will be able to get it working without setting a width on it.

我不确定您是否能够在不设置宽度的情况下使其工作。