Как добавить эффект перехода к div в css при переходе с col-12 на col-9?

Question

Приведенный ниже css работает, только когда я закрываю свой div с классом "onclick-div", но эффект перехода не виден, когда я нажимаю на кнопку, т.е. когда я хотел уменьшить ширину div с классом"set-transition" от 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 Анимированные столбцы начальной загрузки 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>