I am facing an issue with my Angular application. In the HTML file, there is a div element with the class "row" which contains two div elements with the class "col". When clicking on a button, the size of these columns should change:
<button class="btn btn-primay" (click)="changeColumnsSize()"> change column sizes</button>
<div class="row">
<div id="leftColumn" class="col-sm-{{leftColumnSize}}" style="background-color:lavender;">
.col-sm-8
</div>
<div id ="rightColumn" *ngIf="this.state===true" class="col-sm-{{rightColumnSize}}" style="background-color:lavenderblush;">
.col-sm-4
</div>
</div>
To ensure a smooth resize effect, I have added transition properties to the col classes in the CSS file:
.col-sm-8 { transition: width .5s ease; }
.col-sm-4 { transition: width .5s ease ; }
The TypeScript file containing the changeColumnsSize function is as follows:
export class BoxComponent {
leftColumnSize: number = 12;
rightColumnSize: number = 0;
colDifference: number = 4;
state: boolean = false;
constructor() { }
changeColumnsSize(){
if (this.state===false)
this.state = true;
else
this.state = false;
if(this.state===true) {
this.leftColumnSize-=this.colDifference;
this.rightColumnSize+=this.colDifference;
}
else if (this.state===false) {
this.leftColumnSize+=this.colDifference;
this.rightColumnSize-=this.colDifference;
}
}
}
However, there is an issue where the rightColumn appears below the leftColumn during the transition before moving up to its correct position.
Could you assist me in resolving this problem without utilizing Angular animations?