动画Div为100％宽度css

Question

问题

我试图将div设置为100％的孩子宽度。我在悬停时设置了最大宽度的动画，但它正在突然将div推向它，而不是将其平滑地向右移动。任何人都可以看到为什么它没有正确动画？如果可能，我宁愿不使用javascript。

我的尝试

我复制了下面的小提琴：

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

进入以下来源

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用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>

Answer 2

百分比是与您的代码有关的问题，可能是因为您拥有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>

Answer 3

  

我在悬停时动画最大宽度，但是它正在推动div   它是非常突然的，而不是平滑地动画到它   右。

只需将transition-delay添加到:hover .inner，然后将transition-function从ease-in-out更改为linear即可更加顺畅

＆＃13;

＆＃13;

.contents {
  white-space: nowrap;
  display: inline-block;
}
.inner {
  background: #c3c;
  width: 100%;
  max-width: 50px;
  overflow: hidden;
  padding: 5px 0 5px 0;
  transition: all .3s linear;
  
}
.contents:hover .inner {
  max-width: 100%;
  transition-delay:.5s
  
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;