Question

如何将css过渡应用于初始宽度设置为auto

的div

但是，如果我将初始宽度设置为某个数字，例如50px，那么过渡就会开始。

这是 - DEMO

.container {
  width: 200px;
  background: red;
  height: 50px;
}


.child1 {
  background: black;
  display: inline-block;

}

.child2 {
  background: blue;
    display: inline-block;
  width: auto;  /* this does not work */

    /* width: 50px; */ /* this works */
  float: right;
  -webkit-transition: width 2s;
      transition: width 2s;
}

.child2:hover {
  width: 100px;
}

Answer 1

默认情况下，

min-width会占用内部元素width

.container {
  width: 200px;
  background: red;
  height: 50px;
}
.child1 {
  background: black;
  display: inline-block;
}
.child2 {
  background: blue;
  display: inline-block;
  width: auto;
  min-width: 0px; /*changed width to min-width */
  float: right;
  -webkit-transition: 2s;
  transition: 2s;
}
.child2:hover {
  min-width: 100px; /* changed from width to min-width */
}

<div class="container">
  <div class="child1">
    child1
  </div>
  <div class="child2">
    child2
  </div>
</div>

Answer 2

而不是动画def apply_initial(idx, obj, prop): initial[idx] = getattr(obj, prop, u'')尝试动画width：

min-width

.container {
  width: 200px;
  background: red;
  height: 50px;
}
.child1 {
  background: black;
  display: inline-block;
}
.child2 {
  background: blue;
  display: inline-block;
  width: auto;
  /* this does not work */
  min-width: 0;
  float: right;
  -webkit-transition: all .5s;
  transition: all .5s;
  padding-left: 0;
}
.child2:hover {
  min-width: 100px;
}

Answer 3

由于构建动画的方式，无法从auto到Npx运行动画。

例如，拿这个CSS：

.block {
    width: 100px;
    transition: width 2s;
}
.block:hover {
    width: 200px;
 }

这将与以下代码完全相同：

@keyframes animate-width {
    from { width: 100px; }
    to { width: 200px; }
}

.block {
    width: 100px;
 }

 .block:hover {
     animate: animate-width 2s;
 }

从动画关键帧可以看出，定义了起点和终点，以便能够创建适当的动画。

为了运行动画，必须有一个开始和端点可供浏览器的CSS渲染引擎正常运行。 auto永远不会是一个起点，因为它是一个动态分配的值。

您可以通过在加载页面后设置适当的宽度来使用Javascript来完成此工作。对于块元素，将宽度设置为100％而不是auto也可以作为解决方案。

css3从宽度auto转换到＆＃34; n＆＃34; PX

3 个答案: