相关疑难解决方法(0)

我有两个这样的列:

<div class="container">
    <div class="row">
        <div class="col-9"></div>
        <div class="col-3"></div>
    </div>
</div>

我通过angular切换类名是 col-8 offset-2和col-0.col-0是width:0;margin:0;padding:0.

我想知道如何动画宽度和列的位置.

我想要做的是让我的响应宽度divs在失去百分比时有一个过渡width,这样就没有那么多的突然跳跃了.例如,当一个页面的屏幕用

 <div class="row">
       <div class="col-md-3">
           ...
       </div>
       <div class="col-md-3">
           ...
       </div>
       <div class="col-md-3">
           ...
       </div>
       <div class="col-md-3">
           ...
       </div>
 </div>

在下面992px,4个内部div失去了他们的width:25%;财产,实际上没有width财产.当发生这种情况时,我希望平滑过渡到它们的新内容width(跨越它们的内容div).

我尝试的是

 <div class="row">
       <div class="col-md-3 transition-width">
           ...
       </div>
       <div class="col-md-3 transition-width">
           ...
       </div>
       <div class="col-md-3 transition-width">
           ...
       </div>
       <div class="col-md-3 transition-width">
           ...
       </div>
 </div>

我所调用的类的transition-width定义是

.transition-width { transition: width 1s ease-out; webkit-transition: width 1s ease-out; }

但由于某些原因,当我切换断点时没有任何转换.知道为什么会这样吗？为了实现目标,我需要做些什么呢？