element-plus/es/el-collapse-transition/index.js

A Component Library for Vue3.0

import { defineComponent, openBlock, createBlock, Transition, toHandlers, withCtx, renderSlot } from 'vue';
import { addClass, removeClass } from '../utils/dom';

var script = defineComponent({
    name: 'ElCollapseTransition',
    setup() {
        return {
            on: {
                beforeEnter(el) {
                    addClass(el, 'collapse-transition');
                    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) {
                        el.style.height = el.scrollHeight + 'px';
                        el.style.paddingTop = el.dataset.oldPaddingTop;
                        el.style.paddingBottom = el.dataset.oldPaddingBottom;
                    }
                    else {
                        el.style.height = '';
                        el.style.paddingTop = el.dataset.oldPaddingTop;
                        el.style.paddingBottom = el.dataset.oldPaddingBottom;
                    }
                    el.style.overflow = 'hidden';
                },
                afterEnter(el) {
                    removeClass(el, 'collapse-transition');
                    el.style.height = '';
                    el.style.overflow = el.dataset.oldOverflow;
                },
                beforeLeave(el) {
                    if (!el.dataset)
                        el.dataset = {};
                    el.dataset.oldPaddingTop = el.style.paddingTop;
                    el.dataset.oldPaddingBottom = el.style.paddingBottom;
                    el.dataset.oldOverflow = el.style.overflow;
                    el.style.height = el.scrollHeight + 'px';
                    el.style.overflow = 'hidden';
                },
                leave(el) {
                    if (el.scrollHeight !== 0) {
                        addClass(el, 'collapse-transition');
                        el.style.transitionProperty = 'height';
                        el.style.height = 0;
                        el.style.paddingTop = 0;
                        el.style.paddingBottom = 0;
                    }
                },
                afterLeave(el) {
                    removeClass(el, 'collapse-transition');
                    el.style.height = '';
                    el.style.overflow = el.dataset.oldOverflow;
                    el.style.paddingTop = el.dataset.oldPaddingTop;
                    el.style.paddingBottom = el.dataset.oldPaddingBottom;
                },
            },
        };
    },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createBlock(Transition, toHandlers(_ctx.on), {
    default: withCtx(() => [
      renderSlot(_ctx.$slots, "default")
    ]),
    _: 3 /* FORWARDED */
  }, 16 /* FULL_PROPS */))
}

script.render = render;
script.__file = "packages/transition/collapse-transition/index.vue";

script.install = (app) => {
    app.component(script.name, script);
};
const _CollapseTransition = script;

export default _CollapseTransition;