@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
54 lines • 1.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.slideInAnimationsMixin = void 0;
const styled_components_1 = require("styled-components");
const transitionMixin_1 = require("./transitionMixin");
/**
* @name animations
* @description
* Animations for the slide in animation
* @param {ICssAnimationStyled} props - The props of the animation
* @returns {CSSProp} - The animation
*/
const animations = props => (0, styled_components_1.css) `
.${props.variant.type}-enter {
opacity: ${props.options.opacityStart};
transform: translate(
${props.options.animationXStartPosition},
${props.options.animationYStartPosition}
);
}
.${props.variant.type}-enter-active {
opacity: ${props.options.opacityEnd};
transform: translate(
${props.options.animationXEndPosition},
${props.options.animationYEndPosition}
);
${props.options.enterDuration ? (0, transitionMixin_1.transitionMixinEnter)(props) : (0, transitionMixin_1.transitionMixin)(props)}
}
.${props.variant.type}-exit {
opacity: ${props.options.opacityEnd};
transform: translate(
${props.options.animationXEndPosition},
${props.options.animationYEndPosition}
);
}
.${props.variant.type}-exit-active {
opacity: ${props.options.opacityStart};
transform: translate(
${props.options.animationXStartPosition},
${props.options.animationYStartPosition}
);
${props.options.exitDuration ? (0, transitionMixin_1.transitionMixinExit)(props) : (0, transitionMixin_1.transitionMixin)(props)}
}
`;
/**
* @name slideInAnimationsMixin
* @description
* Animations for the slide in animation
* @param {ICssAnimationStyled} props - The props of the animation
* @returns {CSSProp} - The animation
*/
const slideInAnimationsMixin = (props) => animations(props);
exports.slideInAnimationsMixin = slideInAnimationsMixin;
//# sourceMappingURL=slideInAnimationsMixin.js.map