Ionic 5 动画改变列的宽度

Question

我正在用 Ionic 开发一个应用程序，其中需要某些元素的转换。在这种情况下，我有一个两列的页面布局，一个尺寸为 8，一个尺寸为 4。当单击 col size 4 中的“显示全部”按钮时，我必须显示有关其中内容的更多数据。

我的客户想要的是将 col size 4 列的宽度更改为 12 的动画，同时隐藏 col size 8 列。

所以基本上我的问题是如何将列大小从 4 变为 12 并为列增长设置动画？

我在下面的图片中绘制了我的页面布局。提前致谢！

Initial layout

Changed layout

这是一个简单的网格：

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

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

Answer 1

嘿 Nebojša Smrzlić 你应该试试这个。

在您的 .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>

我在要展开和折叠的列中设置了一个按钮，只是为了尝试点击事件并调用你ts中的函数来尝试de方法。

如果你有什么好看的动画展开展开推荐这个post

所以让我知道这是否有效

Ionic 5 动画改变列的宽度

Ionic 5 Animate change width of columns

css

animation

ionic-framework

ion-grid

ionic5