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

Question

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

我的 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

之前已经在此处针对 bootstrap 3 回答了这个问题 Bootstrap 3 animated columns when changing position media queries

方法还是一样，使用transition: all ...

.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>