unocss-preset-ease
Version:
134 lines (128 loc) • 3.61 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function camelCase(str) {
return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
}
function kebabCase(str) {
return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
}
const css = "ease";
const cssIn = "ease-in";
const cssOut = "ease-out";
const cssInOut = "ease-in-out";
const inSine = "cubic-bezier(0.12, 0, 0.39, 0)";
const inCubic = "cubic-bezier(0.32, 0, 0.67, 0)";
const inQuint = "cubic-bezier(0.64, 0, 0.78, 0)";
const inCirc = "cubic-bezier(0.55, 0, 1, 0.45)";
const inQuad = "cubic-bezier(0.11, 0, 0.5, 0)";
const inQuart = "cubic-bezier(0.5, 0, 0.75, 0)";
const inExpo = "cubic-bezier(0.7, 0, 0.84, 0)";
const inBack = "cubic-bezier(0.36, 0, 0.66, -0.56)";
const outSine = "cubic-bezier(0.61, 1, 0.88, 1)";
const outCubic = "cubic-bezier(0.33, 1, 0.68, 1)";
const outQuint = "cubic-bezier(0.22, 1, 0.36, 1)";
const outCirc = "cubic-bezier(0, 0.55, 0.45, 1)";
const outQuad = "cubic-bezier(0.5, 1, 0.89, 1)";
const outQuart = "cubic-bezier(0.25, 1, 0.5, 1)";
const outExpo = "cubic-bezier(0.16, 1, 0.3, 1)";
const outBack = "cubic-bezier(0.34, 1.56, 0.64, 1)";
const inOutSine = "cubic-bezier(0.37, 0, 0.63, 1)";
const inOutCubic = "cubic-bezier(0.65, 0, 0.35, 1)";
const inOutQuint = "cubic-bezier(0.83, 0, 0.17, 1)";
const inOutCirc = "cubic-bezier(0.85, 0, 0.15, 1)";
const inOutQuad = "cubic-bezier(0.45, 0, 0.55, 1)";
const inOutQuart = "cubic-bezier(0.76, 0, 0.24, 1)";
const inOutExpo = "cubic-bezier(0.87, 0, 0.13, 1)";
const inOutBack = "cubic-bezier(0.68, -0.6, 0.32, 1.6)";
const easing = {
// CSS
css,
cssIn,
cssOut,
cssInOut,
/**
* Easing function for smooth entrance.
* 平滑入场的缓动函数。
*/
inSine,
inCubic,
inQuint,
inCirc,
inQuad,
inQuart,
inExpo,
inBack,
/**
* Easing function for smooth exit.
* 平滑退出的缓动函数。
*/
outSine,
outCubic,
outQuint,
outCirc,
outQuad,
outQuart,
outExpo,
outBack,
/**
* Easing function for smooth entrance and exit.
* 平滑入场和退出的缓动函数。
*/
inOutSine,
inOutCubic,
inOutQuint,
inOutCirc,
inOutQuad,
inOutQuart,
inOutExpo,
inOutBack
};
function presetEase({ prefix = "ease-" } = {}) {
const easingFunctionNames = Object.keys(easing).map((name) => kebabCase(name)).join("|");
const easingFunctionSelector = `${prefix}(${easingFunctionNames})`;
return {
name: "unocss-preset-ease",
rules: [
[
new RegExp(`^${easingFunctionSelector}$`),
([, name]) => ({
"transition-timing-function": easing[camelCase(name)]
})
]
],
autocomplete: {
templates: [easingFunctionSelector]
}
};
}
exports.css = css;
exports.cssIn = cssIn;
exports.cssInOut = cssInOut;
exports.cssOut = cssOut;
exports.default = presetEase;
exports.easing = easing;
exports.inBack = inBack;
exports.inCirc = inCirc;
exports.inCubic = inCubic;
exports.inExpo = inExpo;
exports.inOutBack = inOutBack;
exports.inOutCirc = inOutCirc;
exports.inOutCubic = inOutCubic;
exports.inOutExpo = inOutExpo;
exports.inOutQuad = inOutQuad;
exports.inOutQuart = inOutQuart;
exports.inOutQuint = inOutQuint;
exports.inOutSine = inOutSine;
exports.inQuad = inQuad;
exports.inQuart = inQuart;
exports.inQuint = inQuint;
exports.inSine = inSine;
exports.outBack = outBack;
exports.outCirc = outCirc;
exports.outCubic = outCubic;
exports.outExpo = outExpo;
exports.outQuad = outQuad;
exports.outQuart = outQuart;
exports.outQuint = outQuint;
exports.outSine = outSine;
exports.presetEase = presetEase;