.x-collapse-transition{overflow：隐藏；过渡：高度0.22s缓入缓出；}使用过CSStransition属性的童鞋应该知道，当元素的高度在transition开始或者结束时为auto时，动画不生效；那么如何实现改变元素高度的动画效果呢？本文将为您提供一个非常简单的基于Vue3的解决方案。要为高度变化设置动画，我们需要在动画发生之前设置元素的确切高度。当元素从可见变为隐藏时，我们需要先获取计算出的元素高度，将其设置到style属性中，然后执行一个触发浏览器渲染引擎重绘的动作，然后将高度设置为0，这样高度的变化动画就会正常进行。当元素从隐藏变为可见时，我们需要先将高度设置为auto，然后获取元素的计算高度，然后将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后settheheighttoSet来计算高度，这样高度变化动画就可以正常工作了。现在，基于以上实现原理的分析，我们创建一个高阶的变化动画通用组件CollapseTransition.vue。该组件非常简单，仅需要30多行代码。几乎每一行代码都有注释，大家应该能看懂吧？
