问题

我想实现一个动画效果，页面是一个信息列表，我希望在点击列表项时，从列表右侧展示详情信息，在详情展示的时候，列表宽度先左缩小，详情展示出来。大概是这样的：

使用css3动画实现比较简单：

.width-transition {
  transition: width 0.5s;
}

因为使用vue开发，在详情展示的时候为列表和详情加上class

    <div class="info-list width-transition" :class="{narrow: showDetail}">...</div>
    <div class="info-detail width-transition" :class="{active: showDetail}">...</div>

    <style>
      .narrow {
        width: calc(100vw - 300px);
      }
      .active {
        width: 300px;	
      }
    </style>

结果，动画没生效。。。

原因和解决方法

原因很简单，看看MDN对transition属性的描述：

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

注意，这里说的是不同状态间的切换，也就是说，执行动画的元素必须从一个状态转换到另一个状态。而我上面的代码并没有给info-detail一个初始的状态，这个元素默认是没有宽度的，所以直接修改宽度并没有效果。把代码修改成这样即可：

<style>
  .info-detail {
    width: 0px;
  }
  .active {
    width: 300px !important;	
  }
</style>

给info-detail一个初始状态：宽度0。动画生效。

css transition修改宽度无效问题

问题

原因和解决方法