I am facing an issue with the CSS provided below. It seems to only work when I close my div with the class "onclick-div". However, the transition effect is not visible when I click on the button to reduce the width of the div with the class "set-transition" from col-12 to col-9.
Here is My HTML Code:
<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>
And Here is My CSS Code:
.set-transition {
transition:flex 0.5s ease;
width:auto;
flex: 1;
}