Vuejs高度的改变动画探索折叠面板Collapse组件的最

　　提示：文章尾部有全部源码，大家可以CTRLC直接拿走，不用谢我；当然，我还是建议大家都能通过学习自己手写实现。
　　使用过CSStransition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。
　　要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。
　　当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。
　　当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。
　　现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransition。vue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧？templatetransitionvbindlisteners！当visible的值发生改变时，过渡组件的监听器就会触发slottransitiontemplatestylelangscss。xcollapsetransition｛overflow：transition：height。22｝style
　　以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗？是不是非常简单？现在，我们实现折叠面板组件。使用过elementui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成；
　　现在，我们先实现CollapseItem。vue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行；源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。templateslotnametitle｛｛title｝｝sloti：class〔xiconarrowright，｛cls｝arrow，｛isactive：isActive｝〕ixcollapsetransition：visibleisActiveslotxcollapsetransitiontemplate
　　这是CollapseItem。vue组件的样式。import。commonvar。。xcollapseitem｛fontsize：13backgroundcolor：color：borderbottom：1：firstchild｛bordertop：1｝header｛display：alignitems：justifycontent：height：48cursor：｝content｛lineheight：1。8；paddingbottom：25｝arrow｛marginright：8transition：transform。2s；。isactive｛transform：rotate（90deg）；｝｝｝
　　现在，我们实现Collapse。vue组件。该组件仍然只有30多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了；templateslottemplate
　　以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单？童鞋们都理解了吗？不管有什么疑问，童鞋们都可以问我。感谢阅读！