从col-12更改为col-9时，如何在CSS中为div添加过渡效果？

Question

下面给出的css仅在我用类“ onclick-div”关闭div时才起作用，但是当我单击按钮时，即当我想用类减小div的宽度时，看不到过渡效果从col-12到col-9的“设置过渡”，我看不到过渡效果。

我的HTML：

<div class="container">
  <div class="col-12 set-transition" [ngClass]="{'col-md-9' : dropDownVar === 2}">
    <button (click)="dropDownVar=2">+ ADD</button>
  </div>

  <div class="col-12 col-md-3 onclick-div" *ngIf="dropDownVar === 2">
  </div>

</div>

我的CSS：

.set-transition {
  transition:flex 0.5s ease;
  width:auto;
  flex: 1;
}

Answer 1

之前在此处针对引导程序3已回答了此问题 Bootstrap 3 animated columns when changing position media queries

使用过渡的方法仍然相同：全部...

jarsToScan

.show-transition {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}