plus-pro-components/es/components/form/src/collapse-transition.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, openBlock, createBlock, TransitionGroup, mergeProps, toHandlers, withCtx, renderSlot } from 'vue';

var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "PlusCollapseTransition"
  },
  __name: "collapse-transition",
  props: {
    collapseDuration: { default: 300 },
    collapseTransition: { type: Boolean, default: true }
  },
  setup(__props) {
    const props = __props;
    const on = {
      beforeEnter(el) {
        el.style.opacity = 0;
      },
      enter(el, done) {
        requestAnimationFrame(() => {
          el.style.transition = `opacity ${props.collapseDuration}ms linear`;
          el.style.opacity = 1;
          done();
        });
      },
      leave(el, done) {
        el.style.opacity = 0;
        setTimeout(() => {
          done();
        }, props.collapseDuration / 3 * 2);
      }
    };
    return (_ctx, _cache) => {
      return _ctx.collapseTransition ? (openBlock(), createBlock(
        TransitionGroup,
        mergeProps({
          key: 0,
          name: "plus-collapse-transition",
          css: false
        }, toHandlers(on)),
        {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
          /* FORWARDED */
        },
        16
        /* FULL_PROPS */
      )) : renderSlot(_ctx.$slots, "default", { key: 1 });
    };
  }
});

export { _sfc_main as default };