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

Posted 2023-03-06

【中文标题】在 CSS3 或 jQuery 中将元素的宽度从 0% 设置为 100% 动画，它和它的包装器只需要它们需要的宽度，没有预先设置的宽度

【英文标题】：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

【发布时间】：2011-12-13 06:46:53

【问题描述】：

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

当悬停.wrapper 时，它的子元素.contents 应该从0px 动画到它的自然宽度。然后当鼠标从.wrapper 移开时，它应该动画回到0px。 .wrapper 元素应该只有它需要的宽度（允许.contents 增长），所以.wrapper 应该像.contents 那样在宽度上增加和缩小。 .contents 不应设置宽度。我用的是CSS3，但是可以用jQuery来完成，那很好。

问题： 请参阅 JSfiddle

.wrapper 不仅有它需要的宽度。 当.contents 增长时，当它几乎是全宽时，它会跳到下一行 当悬停在.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>

【问题讨论】：

#3 很简单：将过渡样式移至.contents。

【参考方案1】：

一个迟到的答案，但我认为这个答案符合问题的要求:)

这个使用z-index和position absolute，避免了容器元素宽度在transition中不增长的问题。

您可以根据需要调整文本的边距和内边距，如果需要，“+”可以更改为字体超棒的图标。

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>

【参考方案2】：

请检查以下sn-p

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

【参考方案3】：

我想我明白了。

.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 的总宽度。

【讨论】：

如此接近，要完成的最后一件事是让.wrapper 根据需要在宽度上变得越来越小，我已经尝试了一段时间，但我无法做到。这是列表中的第一名，也许我没有很好地解释这一点。所以包装器应该只和“+”一样大，并且所有边的填充都相等。然后.wrapper 像.contents 一样在宽度上增长。我认为这会非常简单，但我遇到了很多麻烦。

@android.nick 这就像你想要的那样工作，但是，我无法弄清楚浮动/对齐部分......你会看到：jsfiddle.net/wxh6kc71

@android.nick 最后，这是一个也符合内容宽度/将包装器扩展到内容宽度的方法......但是，宽度上的转换必须有一个数值，否则他们没有动画。因此，除非您愿意使用 javascript 来制作动画，否则您将不走运。 jsfiddle.net/62dtk8mg

但是.wrapper的宽度不是0； .wrapper 的宽度始终是 .contents 的宽度，内部没有任何内容。没什么大不了的。如何使.wrapper 与.contents 一起增长和缩小。仅使用 CSS。就是这个问题！

这是一个分叉，可以让文本从右到左出现，以防有人想知道:) 诀窍是方向：rtl； jsfiddle.net/18astcoo

【参考方案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;

【讨论】：

包装器有宽度。无论如何它都会占用空间，即使里面没有任何内容。

@Chris Middleton，为了踢球，我想从右到左尝试这个，但还没有想出正确的方法。

【参考方案5】：

如果不指定宽度，我无法让它工作，但以下 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;

我不确定你是否能够在不设置宽度的情况下让它工作。

【参考方案6】：

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

【讨论】：

几乎，它应该只动画到与内容一样宽的宽度，但仅此而已。让这一切完美运行比我想象的要困难。