plus-pro-components/lib/components/form/src/collapse-transition.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');

var _sfc_main = /* @__PURE__ */ vue.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 ? (vue.openBlock(), vue.createBlock(
        vue.TransitionGroup,
        vue.mergeProps({
          key: 0,
          name: "plus-collapse-transition",
          css: false
        }, vue.toHandlers(on)),
        {
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
          /* FORWARDED */
        },
        16
        /* FULL_PROPS */
      )) : vue.renderSlot(_ctx.$slots, "default", { key: 1 });
    };
  }
});

exports.default = _sfc_main;