离子5动画改变列的宽度答案

【问题标题】：Ionic 5 Animate change width of columns离子5动画改变列的宽度
【发布时间】：2021-01-21 04:35:38
【问题描述】：

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

我的客户想要的是在隐藏 col 大小 8 列的同时将 col 大小 4 列的宽度更改为大小 12。

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

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

这是一个简单的网格：

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

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

【问题讨论】：

标签： css ionic-framework animation ionic5 ion-grid

【解决方案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方法。

如果你有什么好看的动画可以展开，我推荐这篇文章 CSS Expand / Contract Animation to Show/Hide Content

如果可行，请告诉我

【讨论】：

谢谢，最后我实现了与您的答案几乎相同的东西。由于客户需要特定的动画，因此仍在努力解决动画问题，但我会看看您附加的链接。 :)