Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add step-start and step-and to timings constant #4795

Merged
merged 1 commit into from Jun 24, 2021
Merged

Add step-start and step-and to timings constant #4795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/util/parseAnimationValue.js
View file
Open in desktop
Expand Up @@ -2,7 +2,15 @@ const DIRECTIONS = new Set(['normal', 'reverse', 'alternate', 'alternate-reverse
const PLAY_STATES = new Set(['running', 'paused'])
const FILL_MODES = new Set(['none', 'forwards', 'backwards', 'both'])
const ITERATION_COUNTS = new Set(['infinite'])
const TIMINGS = new Set(['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'])
const TIMINGS = new Set([
'linear',
'ease',
'ease-in',
'ease-out',
'ease-in-out',
'step-start',
'step-end',
])
const TIMING_FNS = ['cubic-bezier', 'steps']

const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
Expand Down
11 changes: 11 additions & 0 deletions tests/plugins/animation.test.js
View file
Open in desktop
Expand Up @@ -13,10 +13,12 @@ test('defining animation and keyframes', () => {
none: 'none',
spin: 'spin 1s linear infinite',
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
blink: 'blink 1s step-end infinite',
},
keyframes: {
spin: { to: { transform: 'rotate(360deg)' } },
ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },
blink: { '50%': { transform: 'scale(2)' } },
},
},
variants: {
Expand All @@ -43,11 +45,20 @@ test('defining animation and keyframes', () => {
}
}

@layer utilities {
@variants {
@keyframes blink {
50% { transform: scale(2); }
}
}
}

@layer utilities {
@variants {
.animate-none { animation: none; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-blink { animation: blink 1s step-end infinite; }
}
}
`)
Expand Down