vue-cssgen
Version:
Инструмент для автоматизации работы со стилями в Vue 3-проектах
70 lines (68 loc) • 2.41 kB
JavaScript
const animateDelayValues = {
'1s': '1s',
'2s': '2s',
'4s': '4s',
};
export default [
{
match: /^animate__animated$/,
css: cls => {
return `.${cls} { animation-duration: 1s; animation-fill-mode: both; }`;
},
group: 'animation',
desc: 'animation base',
modifiable: true,
examples: ['animate__animated'],
values: null,
prefix: 'animate__animated'
},
{
match: /^animate__delay-(\d+s)$/,
css: cls => {
const val = animateDelayValues[cls.match(/^animate__delay-(\d+s)$/)[1]];
return val ? `.${cls} { animation-delay: ${val}; }` : null;
},
group: 'animation',
desc: 'animation delay',
modifiable: true,
examples: ['animate__delay-1s', 'animate__delay-2s', 'animate__delay-4s'],
values: animateDelayValues,
prefix: 'animate__delay-'
},
{
match: /^animate__fadeIn$/,
css: cls => {
return `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .${cls} { animation-name: fadeIn; }`;
},
group: 'animation',
desc: 'fade in animation',
modifiable: true,
examples: ['animate__fadeIn'],
values: null,
prefix: 'animate__fadeIn'
},
{
match: /^animate__fadeInDown$/,
css: cls => {
return `@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .${cls} { animation-name: fadeInDown; }`;
},
group: 'animation',
desc: 'fade in down animation',
modifiable: true,
examples: ['animate__fadeInDown'],
values: null,
prefix: 'animate__fadeInDown'
},
{
match: /^animate-bounce$/,
css: cls => {
return `@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .${cls} { animation: bounce 1s infinite; }`;
},
group: 'animation',
desc: 'bounce animation',
modifiable: true,
examples: ['animate-bounce'],
values: null,
prefix: 'animate-bounce'
},
];