8000 feat: transitions · unocss/unocss@a094ad0 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit a094ad0

Browse files
antfuantfu
committed
feat: transitions
1 parent 3ef1660 commit a094ad0

File tree

6 files changed

+40
-9
lines changed

6 files changed

+40
-9
lines changed

‎playground/src/components/Cover.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<template>
2-
<div class="h-80 text-center flex">
3-
<div m="auto">
2+
<div class="h-80 text-center flex select-none all:transition-400">
3+
<div m="auto" class="group">
44
<div class="font-100 text-4xl -mb-4">~</div>
5-
<div class="text-5xl font-100">miniwind</div>
6-
<div class="opacity-50 font-200 mt-1 tracking-wider">Re-imaging Atomic CSS</div>
5+
<div class="text-5xl font-100">
6+
<span class="group-hover:opacity-25">m</span><span>i</span><span class="group-hover:opacity-25">n</span><span>i</span><span class="group-hover:opacity-25">w</span><span>i</span><span class="group-hover:opacity-25">nd</span>
7+
</div>
8+
<div class="opacity-50 font-200 mt-1 tracking-wider group-hover:text-teal-400">Re-imaging Atomic CSS</div>
79
</div>
810
</div>
911
</template>

‎src/presets/default/rules/animations.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { MiniwindRule } from '../../../types'
2+
3+
const transitionProps = ['background-color', 'border-color', 'color', 'fill', 'stroke', 'opacity', 'box-shadow', 'transform', 'filter', 'backdrop-filter']
4+
const transitionPropsStr = transitionProps.join(', ')
5+
6+
export const transitions: MiniwindRule[] = [
7+
[/^transition(?:-([a-z-]+))?(?:-(\d+))?$/, ([, prop, duration = '150']) => {
8+
if (prop && !transitionProps.includes(prop))
9+
return
10+
11+
return {
12+
'transition-property': prop || transitionPropsStr,
13+
'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
14+
'transition-duration': `${duration}ms`,
15+
}
16+
}],
17+
]

‎src/presets/default/rules/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { MiniwindRule } from '../../../types'
2+
import { transitions } from './animations'
23
import { borders, borderStyles, rounded } from './border'
34
import { bgColors, borderColors, opacity, textColors } from './colors'
45
import { flex } from './flex'
@@ -58,4 +59,5 @@ export const defaultRules: MiniwindRule[] = [
5859
insets,
5960
floats,
6061
zIndexes,
62+
transitions,
6163
].flat(1)

‎src/presets/default/variants/children.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import { MiniwindVariant } from '../../../types'
22
import { variantMatcher } from '../../../utils'
33

4-
export const variantChildren: MiniwindVariant = {
5-
match: variantMatcher('children'),
6-
selector: input => `${input} > *`,
7-
}
4+
export const variantChildren: MiniwindVariant[] = [
5+
{
6+
match: variantMatcher('children'),
7+
selector: input => `${input} > *`,
8+
},
9+
{
10+
match: variantMatcher('all'),
11+
selector: input => `${input} *`,
12+
},
13+
]

‎src/presets/default/variants/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const defaultVariants = [
3535
variantNegative,
3636
variantImportant,
3737
variantBreakpoints,
38-
variantChildren,
38+
...variantChildren,
3939
...variantColorsClass,
4040
...variantPseudoClasses,
4141
...variantPseudoElements,

‎src/presets/default/variants/pseudo.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export function createPseudoClassVariant(name: string, pseudo = name): MiniwindV
1111
match: variantMatcher(`not-${name}`),
1212
selector: input => `${input}:not(:${pseudo})`,
1313
},
14+
{
15+
match: variantMatcher(`group-${name}`),
16+
selector: input => `.group:${pseudo} ${input}`,
17+
},
1418
]
1519
}
1620

0 commit comments

Comments
 (0)
0