将元素的宽度设置为0到100%的动画,并且它的包装器只有它们需要的宽度,没有预先设置的宽度,在CSS3或jQuery中

Question

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>

Answer 1

我想我已经明白了.http://jsfiddle.net/tVHYg/4/

动画100%使其包装,因为框大于可用宽度(100%减去+它后面的空格).

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

Answer 2

答案很晚，但我认为这个答案符合问题的要求:)

这个使用了 z-index 和绝对位置，避免了容器元素宽度在过渡过程中不增长的问题。

您可以调整文本的边距和填充以满足您的需要，并且如果需要，“+”可以更改为字体很棒的图标。

body {
  font-size: 16px;
}

.container {
  height: 2.5rem;
  position: relative;
  width: auto;
  display: inline-flex;
  align-items: center;
}

.add {
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  background: #2794A5;
  border-radius: 20px;
  height: 100%;
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
}

.text {
  white-space: nowrap;
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0;
  color: #fff;
  overflow: hidden;
  transition: 0.3s all ease;
  background: #2794A5;
  height: 100%;
  display: flex;
  align-items: center;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-left: 20px;
  padding-left: 20px;
  cursor: pointer;
}

.container:hover .text {
  width: 100%;
  padding-right: 20px;
}

<div class="container">
  <span class="add">+</span>
  <span class="text">Add new client</span>
</div>

Answer 3

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

Answer 4

通过转换填充和宽度来实现它.

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