Ionic 5 Animate изменить ширину столбцов

Question

Я разрабатываю приложение на Ionic, где необходимы определенные переходы элементов. В данном случае у меня есть макет страницы из двух столбцов: один размер 8, один размер 4. Когда я нажимаю кнопку "Показать все" с размером столбца 4, я должен показать больше данных о содержимом в нем.

Мой клиент хочет анимировать изменение ширины столбца с размером столбца 4 на размер 12, скрывая столбец с размером столбца 8.

Итак, в основном мой вопрос заключается в том, как изменить размер столбца с 4 на 12 и оживить рост столбца?

Я нарисовал свой макет страницы на фотографиях ниже. Заранее спасибо!

Первоначальный макет

Измененный макет

Это простая сетка:

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

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

Answer 1

Привет, Небойша Смрзлич, ты должен попробовать это.

В вашем .ts файл объявляет эти переменные:

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

И ваш html будет таким:

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

Я установил кнопку в столбце, который вы хотите развернуть и свернуть, просто чтобы попробовать событие щелчка и вызвать функцию в yous ts, чтобы попробовать этот метод.

Если вам нужна красивая анимация для показа, я рекомендую этот пост CSS Expand / Contract Animation to Show/Hide Content

Так дайте мне знать, работает ли это