在 CSS3 或 jQuery 中将元素的宽度从 0 动画到 100%，其及其包装器仅达到需要的宽度，无需预设宽度

问题描述 投票：0回答：7

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>

jquery css css-transitions
7个回答
103
投票

我想我已经明白了。

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

15
投票

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%;
}
10
投票

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

这个使用了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>

9
投票

通过转换填充和宽度使其发挥作用。

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;
}
2
投票

请检查以下片段

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

0
投票

这还不是一个得到广泛支持的解决方案，但希望将其留在这里供未来的读者使用。

目前（截至 2024 年 11 月 11 日）尚未真正支持 calc-size。但是，一旦浏览器开始实现它并且不需要旧版浏览器支持，它就可以用于设置宽度和高度的动画。引用链接文档：

calc-size() CSS 函数允许您对内部大小值执行计算，例如 auto、fit-content 和 max-content [...]

calc-size() 返回值也可以进行插值，从而可以在动画和过渡中使用 size 关键字值。

在 MDN 文档中，还有一个使用 calc-size 函数进行基于高度的过渡的 

example
。例如，您可以使用最新的 Chrome 对其进行测试。

-2
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.