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

Question

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

我的网页：

<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 之前已经回答过了在更改位置媒体查询时引导 3 个动画列

方法仍然相同，使用过渡：所有...

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-9 show-transition bg-dark text-light">Test</div>
    <div class="col-md-3">Test 2</div>
  </div>
</div>