@kubit-ui-web/react-components/dist/esm/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

import { css } from '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)
export const transitionMixin = (props) => 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};
`;
// deprecated - props duration, enterDuration, exitDuration and delay should be of type string (props should come with the units)
export const transitionMixinEnter = (props) => 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};
`;
// deprecated - props duration, enterDuration, exitDuration and delay should be of type string (props should come with the units)
export const transitionMixinExit = (props) => 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};
`;
//# sourceMappingURL=transitionMixin.js.map