将Div动画效果设为100%宽度CSS

Question

问题

我试图将一个 div 动画到其子元素宽度的 100%。我在悬停时对最大宽度进行动画处理，但它会突然向右推动 div，而不是平滑地动画到右侧。有人能看出它为什么不能正确地进行动画吗？如果可能的话，我希望不使用 JavaScript。

我的尝试

我已经复制了下面的 fiddle：

http://jsfiddle.net/tVHYg/1662/

并将其源代码放在下面：

.contents {
    white-space:nowrap;
    display:inline-block;
}

.inner {
    background:#c3c;
    width: 100%;
    max-width:50px;
    
    overflow:hidden;
    transition: all .3s ease-in-out;
    padding: 5px 0 5px 0;
}

.contents:hover .inner {
    max-width:100%;
}

    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

- user2662833

Answer 1

百分比是与您的代码相关的问题，可能是因为您设置了width: 100%;，同时内部类别又设置了max-width: 50px;。

使用像素可以解决这个问题。任何超出盒子尺寸的像素都会使动画更快，例如max-width: 1000px;只会加速动画而不会扩大盒子边界。

.contents {
    white-space:nowrap;
    display:inline-block;
}

.inner {
    background:#c3c;
    width: 100%;
    max-width:50px;
    
    overflow:hidden;
    transition: all .5s ease-in-out;
    padding: 5px 0 5px 0;
}

.contents:hover .inner {
    max-width:1250px;
}

    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

- Tasos

---

但是这会产生一个新问题，如果您将最大宽度设置得太大，动画启动需要一段时间，不是吗？ - user2662833

@user2662833 -- 不是在开始时，而是当它恢复到原始大小时--我修改为max-width:1250px;以查看--理想情况下，您需要精确的像素宽度，而不是更大的宽度。 - Tasos

是的，但这在我的使用情况中是个问题，因为我事先不知道div的宽度。这正是我想做的，但我不确定如何使其适用于任何大小的div。 - user2662833

@user2662833 -- 如果您不知道宽度，可以使用JavaScript获取它 -- https://dev59.com/dG445IYBdhLWcg3wl7XW -- 然后设置CSS -- http://www.w3schools.com/js/js_htmldom_css.asp - Tasos

是的，我知道。如果有可能，我只是想避免使用JavaScript。 - user2662833

Answer 2

你可以使用 display: inline-flex 来实现这个。

.container {
  display: inline-flex;
}

.contents {
  display: inline-flex;
  transition: all .3s ease-in;
  overflow: hidden;
  width: 50px;
  margin: 2px;
}

.inner {
  background:#c3c;
  white-space:nowrap;
  padding: 10px 0;
}

.contents:hover {
  transition-delay: 0.2s;
  width: 100%;
}

<div class="container">
  <div class="contents">
    <div class="inner">A bit of text never hurt anyone</div>
  </div>

  <div class="contents">
    <div class="inner">A bit of text never hurt anyone</div>
  </div>
</div>

- Nenad Vracar

---

这会在盒子之间产生间隙，如果你还将鼠标悬停在右侧的盒子上，它会将左侧的盒子向左推一点。 - Tasos

是的，它似乎仍然在推动盒子（并且盒子之间的间隙似乎增加了）。 - user2662833