Ionic 5 Animate change width of columns

Question

I’m developing an app in Ionic where certain transitions of elements are needed. In this case specifically I have a page layout of two columns, one size 8, one size 4. When clicked on “Show all” button in col size 4, I have to show more data regarding the content in it.

What my client wants is to animate change of width of the col size 4 column to size 12 while hiding the col size 8 column.

So basically my question is how to turn col size 4 to 12 and animate the column growth?

I have drawn my page layout in the pics below. Thank you in advance!

Initial layout

Changed layout

It's a simple grid:

 <ion-grid>
  <ion-row>
     <ion-col size="8">
        
    </ion-col>
     <ion-col size="4">

     </ion-col>
 </ion-row>
</ion-grid>

Answer 1

hey Nebojša Smrzlić you should try this.

In your .ts file declare these variables:

colum1=8
colum2=4
show_colum2:true

constructor(){}

show_expand(){
 this.show_colum2=!this.show_colum2
 if(!show_colum2){this.colum2=12}else{this.colum2=4}
 }

And your html would be like this:

 <ion-grid>
 <ion-row>
   <ion-col [size]=colum1 *ngif=show_colum2>  
     </ion-col>
   <ion-col [size]=colum2>
      <ion-button (iclick)='show_expand()'> expand/show</ion-button>
    </ion-col>
   </ion-row>
</ion-grid>

I set a button in the column that you want to expand and collapse just to try the click event and call the function in yous ts to try de method.

if you what a good looking animation to show expand I recommend this post CSS Expand / Contract Animation to Show/Hide Content

So let me know if this works