“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 三 天，点击查看活动详情”
组件化思维，能抽象的东西绝不写死在逻辑上
.tas-collapse-enter-active, // 定义进入过渡生效时的状态
.tas-collapse-leave-active{ //定义离开过渡生效时的状态
height: 100px !important;
transition:all 1s ease;
overflow: hidden;
}
// 定义进入过渡的开始状态
.tas-collapse-enter,
.tas-collapse-leave-to { //定义离开过渡的结束状态
height: 0px !important;
}
高度不固定得到css动画
这里发现这种效果要求指定宽度或高度。但是我们想让其实现自适应，随内容去实现过渡动画。
这里发现需要其他方法：
通过transition的钩子函数 + render渲染函数，我们来自定义一个过渡效果，由JS来掌控变化的值
展开时，height从 0 逐步增大到 scrollHeight
收缩时，height从 scrollHeight 逐步减小到 0
render函数
render在beforeMount后，mount前，vue生命周期
setup,beforeCreate,create,beforeMount,mounted,beforeUnmount,unmounted,生命周期钩子函数。
render比template更像编译器，createElement,涉及到vue的虚拟dom。它与template都可以渲染创建html模板。
可以根据情况生成对应功能的dom,整体类似函数式编程，
render适应于复杂逻辑，render性能较高，
使用render函数渲染没有编译过程，render无法与template一起使用，里面的ns是命名空间，collapse赋给了ns,
element-ui的实现逻辑
拿到组件的dom,看源码的实现逻辑是编写触发函数，设置setTimeout，延长50ms,中间编写函数的对应逻辑，在ts中设定三个常量，focusing,isClick,id相当于参数传参
网上看还有用 transform:scaleY(1);
实现出来的效果只是文字往上飘，但文本框并没有关闭的效果，
