(好久没更了,更一下)
最近一个需求需要实现展开收起的效果(因为是树形控件,但是移动端组件库里没有能用的,所以打算自己手写一个)
遇到了一个问题,内容不固定不说,内容里面还能有展示更多(类似省略)
以我写的组件结构,拿不到当前层级的容器高度,而且,其实这样操作还有很致命的缺陷(内层展示更多后,外层要以此检视高度)
最后总算是找到一个博客,感谢大佬!是通过 grid 布局实现的,我把需要被展开收起的东西全部放到一个容器里面,再通过去控制 columns 上的 fr 从 1 -> 0,实现了这样一个动画效果
有兴趣的可以试下,大致结构如下
<div 控制这里的fr,grid布局也在这个盒子上>
<div 这个盒子高度一定要设置 min-height,因为会以min-content作为最小高度>
...内容
</div>
</div>
至于什么max-height的,额,动画效果实在不理想(展开很快,收起很慢)最重要我是不定高度,鬼知道内容会不会超出你设置的 max-height,而通过 ref 手动计算的话,虽然是有效果,但是外层盒子他不会变啊!