@kubit-ui-web/react-components/dist/cjs/components/cssAnimation/animations/transitionMixin.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.transitionMixinExit = exports.transitionMixinEnter = exports.transitionMixin = void 0;
const styled_components_1 = require("styled-components");
/**
 * @name transitionMixin
 * @description
 * Mixin for the transition
 * @param {ICssAnimationStyled} props - The props of the animation
 * @returns {CSSProp} - The animation
 *
 */
// deprecated - props duration, enterDuration, exitDuration and delay should be of type string (props should come with the units)
const transitionMixin = (props) => (0, styled_components_1.css) `
  transition:
    opacity
      ${typeof props.options?.duration === 'number'
    ? props.options?.duration + 's'
    : props.options?.duration},
    transform
      ${typeof props.options?.duration === 'number'
    ? props.options?.duration + 's'
    : props.options?.duration};
  transition-timing-function: ${props.options?.timingFunction};
  transition-delay: ${typeof props.options?.delay === 'number'
    ? props.options?.delay + 's'
    : props.options?.delay};
`;
exports.transitionMixin = transitionMixin;
// deprecated - props duration, enterDuration, exitDuration and delay should be of type string (props should come with the units)
const transitionMixinEnter = (props) => (0, styled_components_1.css) `
  transition:
    opacity
      ${typeof props.options?.enterDuration === 'number'
    ? props.options?.enterDuration + 's'
    : props.options?.enterDuration},
    transform
      ${typeof props.options?.enterDuration === 'number'
    ? props.options?.enterDuration + 's'
    : props.options?.enterDuration};
  transition-timing-function: ${props.options?.timingFunction};
  transition-delay: ${typeof props.options?.delay === 'number'
    ? props.options?.delay + 's'
    : props.options?.delay};
`;
exports.transitionMixinEnter = transitionMixinEnter;
// deprecated - props duration, enterDuration, exitDuration and delay should be of type string (props should come with the units)
const transitionMixinExit = (props) => (0, styled_components_1.css) `
  transition:
    opacity
      ${typeof props.options?.exitDuration === 'number'
    ? props.options?.exitDuration + 's'
    : props.options?.exitDuration},
    transform
      ${typeof props.options?.exitDuration === 'number'
    ? props.options?.exitDuration + 's'
    : props.options?.exitDuration};
  transition-timing-function: ${props.options?.timingFunction};
  transition-delay: ${typeof props.options?.delay === 'number'
    ? props.options?.delay + 's'
    : props.options?.delay};
`;
exports.transitionMixinExit = transitionMixinExit;
//# sourceMappingURL=transitionMixin.js.map