vue项目中实现折叠面板动画效果
由于用了vue的transition组件实现,觉得动画不太平滑,所以自己定义一个js,相对来说,动画效果好多了
一、封装函数式组件
collapse-transition.js
// collapse-transition.js
const transitionStyle = '0.3s height ease-in-out';
const Transition = {
beforeEnter(el) {
el.style.transition = transitionStyle;
if (!el.dataset) el.dataset = {};
el.style.height = 0;
},
enter(el) {
if (el.scrollHeight !== 0) {
el.style.height = `${el.scrollHeight}px`;
} else {
el.style.height = '';
}
el.style.overflow = 'hidden';
},
afterEnter(el) {
el.style.transition = '';
el.style.height = '';
},
beforeLeave(el) {
if (!el.dataset) el.dataset = {};
el.style.display = 'block'; // 添加这一行
el.style.height = `${el.scrollHeight}px`;
el.style.overflow = 'hidden';
},
leave(el) {
if (el.scrollHeight !== 0) {
el.style.transition = transitionStyle;
el.style.height = 0;
}
},
afterLeave(el) {
el.style.transition = '';
el.style.height = '';
},
};
export default {
name: 'CollapseTransition',
functional: true,
render(h, { children }) {
const data = {
on: Transition,
};
return h('transition', data, children);
},
};
二、在需要的地方使用:
//引入
import CollapseTransition from "../utils/collapse-transition";
//注册
components: {
CollapseTransition: CollapseTransition,
},
三、html中使用
<CollapseTransition >
<div class="process" ref="child" v-show="item.isExtend">
需要折叠的一些内容啦啦啦啦
需要折叠的一些内容啦啦啦啦
需要折叠的一些内容啦啦啦啦
</div>
</CollapseTransition>
原文链接:
https://blog.csdn.net/qq_38387487/article/details/109364284
感谢博主分享