flex-grow竟然支持动画过渡，用在全屏的折叠面板刚刚好
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
之前啊从来都没想过
flex-grow还能支持动画过渡
什么意思呢
给大家看一下啊
这是一个垂直的flex布局
里面有3个元素
现在呢我选中第二个
然后给它加一个flex-grow
大家看 第二个就撑满 了对吧
但是呢这个过程是没有动画的
后来我就想
这个flex-grow支不支持动画呢
我就把这个动画试了一下
transition然后呢我们给flax-grow
开启一个0.3秒的过渡
我们看一下
再试一遍啊flex-grow等于1，注意 大家看
看到了吗
就很平滑了
包括呢 我们再给1来一个
flex-grow等于1 大家看
所以呢我们基于这个思路
是可以封装一个
类似于这种全屏的折叠面板
这个是我封装好的啊
只不过有一个细节我们需要处理一下
什么意思呢
假如整个这个组件这么大
然后呢里边
有一个item
是折叠起来的
然后呢还有一个item（我换个颜色）
是展开的
假设就两个item
那
跟刚才的区别是什么呢
就是如果我们在做这个组件的过程中
按说是有一个头一个body
那下边的body里边是有内容的
比如说他现在有1行两行
有这些内容
那么这些内容他是占高度的
默认情况下比如说现在有这些内容
他占的高度到这里
所以在第2个item 在收起来的时候
他只能收到哪里啊
只能收到
这个位置
所以呢
我们要想办法让这个整个的内容
不会占据外层的空间
所以呢我们要把它改造成
absolute定位
然后呢 top要让开顶上那
个标题比如说40高度
然后宽度是百分之百
这样就能解决他收缩的时候
内容没缩走的问题
那关于这个（纯HTML）代码呢
我已经给他放到github这个gist里面了
那我们再回到上一期视频
怎么处理呢
我们可以自己封装一个item组件
然后呢我们利用这个样式啊
把外面这个
给他改成flex布局
至于这个我们自己
封装的详细过程这期我就不演示了
思路就是我们借用flex-grow
这个动画来实现的
那关于这部分vue的代码呢
我都统一给他放到了这个视频的
demo里边
这个demo里边有很多往
期视频用到的一些例子哈
统一放到我Github的这个项目里了
大家需要的话可以自己来找一下