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
感谢博主分享