使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？ 本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。
要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。
当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。
当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。
现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransition.vue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧？
以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗？是不是非常简单？现在，我们实现折叠面板组件。使用过element-ui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成；
现在，我们先实现CollapseItem.vue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行；源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。
这是CollapseItem.vue组件的样式。
现在，我们实现Collapse.vue组件。该组件仍然只有30多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了；
以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单？童鞋们都理解了吗？不管有什么疑问，童鞋们都可以问我。感谢阅读！
VUE 的核心思想是只操作 VDOM ，而不直接操作页面。也就是说，布局和样式效果本身是必须要提前写成 vue 组件的，然后 vue 加载时渲染成 VDOM，再然后就是我们通过 vue 的规范在 js 代码中去控制 VDOM。
就你上面这个效果而言，实现思路是这样：
1，左右宽度自适应效果这个以前一般是使用 流式布局 或者定位加 margin 的方式实现，现在一般使用 flex 布局实现，具体你可以搜索 “两栏自适应布局”，这个属于 HTML + CSS 基础，与 vue 本身关系不大，你需要先把这个布局写好。
2，左边小三角的折叠、展开效果是通过两个不同状态的效果来实现的，一个展开状态，一个折叠状态。通常的做法是默认为折叠状态，样式通过标签选择器直接添加在默认样式上，然后再写一个展开状态的class样式，当给小三角标签添加这个class时为展开效果，移除class时为折叠效果。这个在 vue 中直接 在 data 中添加一个状态属性就可以实现，比如在 data 中添加一个属性为 isOpen 的布尔值，当值为true时表示展开状态，为 false 时为折叠状态。在vue的html模板中就可以这样写：（假设小三角是通过 span 标签实现的）<span :class="{"active": isOpen}">，当然也可以直接用三目的方式赋值，方法有多种。
3，右边的内容切换使用的是 v-if 指令，原理是通过索引与左边的选项进行关联，然后通过索引来判断显示哪一部分内容。
vue 的实现原理跟原生 js 是一样的，只是原生是直接操作页面元素，vue 是操作的 VDOM。
