https://www.samaterials.es/js/el-collapse-transition.js?v=1789002534

1function addClass(el, cls) {
2    if (!el) return;
3    var curClass = el.className;
4    var classes = (cls || '').split(' ');
5
6    for (var i = 0, j = classes.length; i < j; i++) {
7        var clsName = classes[i];
8        if (!clsName) continue;
9
10        if (el.classList) {
11            el.classList.add(clsName);
12        } else if (!hasClass(el, clsName)) {
13            curClass += ' ' + clsName;
14        }
15    }
16    if (!el.classList) {
17        el.className = curClass;
18    }
19};
20function removeClass(el, cls) {
21    if (!el || !cls) return;
22    var classes = cls.split(' ');
23    var curClass = ' ' + el.className + ' ';
24
25    for (var i = 0, j = classes.length; i < j; i++) {
26        var clsName = classes[i];
27        if (!clsName) continue;
28
29        if (el.classList) {
30            el.classList.remove(clsName);
31        } else if (hasClass(el, clsName)) {
32            curClass = curClass.replace(' ' + clsName + ' ', ' ');
33        }
34    }
35    if (!el.classList) {
36        el.className = trim(curClass);
37    }
38};
39
40var ElCollapseTransition = {
41    name: 'ElCollapseTransition',
42    template: `<transition
43    :name="collapseTransitionName"
44    @before-enter="beforeEnter"
45    @enter="enter"
46    @after-enter="afterEnter"
47    @before-leave="beforeLeave"
48    @leave="leave"
49    @after-leave="afterLeave"
50    >
51        <slot></slot>
52    </transition>`,
53    props: {
54        value: Boolean,
55        collapseTag: String
56    },
57    data() {
58        return {
59            elHeight: 0
60        };
61    },
62    computed: {
63        collapseTransitionName() {
64            const tag = this.collapseTag || 'el-collapse';
65            return `${tag}-transition`;
66        }
67    },
68    methods: {
69        beforeEnter(el) {
70            addClass(el, 'collapse-transition');
71            if (!el.dataset) el.dataset = {};
72            el.dataset.oldPaddingTop = el.style.paddingTop;
73            el.dataset.oldPaddingBottom = el.style.paddingBottom;
74            el.style.height = '0';
75            el.style.paddingTop = 0;
76            el.style.paddingBottom = 0;
77        },
78        enter(el) {
79            el.dataset.oldOverflow = el.style.overflow;
80            if (el.scrollHeight !== 0) {
81                el.style.height = el.scrollHeight + 'px';
82                el.style.paddingTop = el.dataset.oldPaddingTop;
83                el.style.paddingBottom = el.dataset.oldPaddingBottom;
84            } else {
85                el.style.height = '';
86                el.style.paddingTop = el.dataset.oldPaddingTop;
87                el.style.paddingBottom = el.dataset.oldPaddingBottom;
88            }
89            el.style.overflow = 'hidden';
90        },
91        afterEnter(el) {
92            // for safari: remove class then reset height is necessary
93            removeClass(el, 'collapse-transition');
94            el.style.height = '';
95            el.style.overflow = el.dataset.oldOverflow;
96        },
97        beforeLeave(el) {
98            if (!el.dataset) el.dataset = {};
99            el.dataset.oldPaddingTop = el.style.paddingTop;
100            el.dataset.oldPaddingBottom = el.style.paddingBottom;
101            el.dataset.oldOverflow = el.style.overflow;
102            el.style.height = el.scrollHeight + 'px';
103            el.style.overflow = 'hidden';
104        },
105        leave(el) {
106            if (el.scrollHeight !== 0) {
107                // for safari: add class after set height, or it will jump to zero height suddenly, weired
108                addClass(el, 'collapse-transition');
109                el.style.height = 0;
110                el.style.paddingTop = 0;
111                el.style.paddingBottom = 0;
112            }
113        },
114        afterLeave(el) {
115            removeClass(el, 'collapse-transition');
116            el.style.height = '';
117            el.style.overflow = el.dataset.oldOverflow;
118            el.style.paddingTop = el.dataset.oldPaddingTop;
119            el.style.paddingBottom = el.dataset.oldPaddingBottom;
120        },
121    }
122}