本文介绍了如何在Vue中实现展开折叠效果，通过创建`collapse.js`文件定义过渡动画，并在Vue组件中引入使用。详细步骤包括定义CSS过渡属性、声明过渡函数以及在组件模板中应用。点击按钮即可实现内容的展开和折叠。
Vue 实现展开折叠效果
效果参见：https://segmentfault.com/q/1010000011359250/a-1020000011360185
上述链接中，大佬给除了解决方法，再次进行总结，方便以后使用。
除了使用jQuery的方式实现上述效果，同样可以在Vue实现，下面是解决办法：
1、创建collapse.js文件
const elTransition =
"0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
"before-enter"(el) {
el.style.transition = elTransition;
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {<
最低0.47元/天 解锁文章
1437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
