archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Tim Kleyersburg <tk@wacg.de>
This commit is contained in:
Tim 2021-06-24 16:49:57 +02:00 committed by GitHub
parent b3d5b4e000
commit fdfecf3b9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/util/parseAnimationValue.js
View File

@ -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.

11
tests/plugins/animation.test.js
View File

@ -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: {
@ -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; }
}
}
`)