Implement keyframes function and add animation prop support #122
Conversation
| @@ -133,6 +142,7 @@ All of these CSS properties are supported. You can pass either a string or a num | |||
| - `clear` | |||
| - `color` | |||
| - `columnGap` | |||
| - `content` | |||
There was a problem hiding this comment.
After pulling in this change to Evergreen locally and swapping out glamor, the Overlay component wasn't showing the transparent grey background due to the missing content: ""; rule (https://github.com/segmentio/evergreen/blob/master/src/overlay/src/Overlay.js#L54). Since this isn't directly related to animations/keyframes, I can revert this change and make a separate PR for it if desired.
| } | ||
| }) | ||
|
|
||
| const AnimatedBox = () => <Box animation={`${openAnimation} 240ms cubic-bezier(0.175, 0.885, 0.320, 1.175)`} /> |
| @@ -0,0 +1,110 @@ | |||
| import { BoxCssProps, CssProps } from './enhancers' | |||
|
|
|||
| export type KeyframesPercentageKey = | |||
There was a problem hiding this comment.
I wonder if we want to consider something like this?
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
? Acc[number]
: Enumerate<N, [...Acc, Acc['length']]>
type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>
type T = IntRange<20, 300>
requires TS 4.5 though (from SO)
There was a problem hiding this comment.
I know 😢 That was the first thing I looked into bc I didn't want to type out 0-100 manually 😂 (ended up running new Array(100).fill(null).map((_, i) => i) in a repl to enumerate all of the values) We'll have to give this repo some love and upgrade TS next!
This PR implements the ability to generate keyframe styles that are injected into the stylesheet and adds support for animation-related props. This backfills the last bit of functionality so we can migrate Evergreen off
glamor! The API is very similar to the currentglamorfunction. (see example in Toast.js)Results from the
masterbranch3,696 ops/sec ±3.74% (54 runs sampled)
3,702 ops/sec ±4.95% (54 runs sampled)
3,662 ops/sec ±4.45% (55 runs sampled)
3,794 ops/sec ±4.02% (54 runs sampled)
3,845 ops/sec ±4.43% (54 runs sampled)
3,711 ops/sec ±4.30% (53 runs sampled)
3,841 ops/sec ±4.08% (54 runs sampled)
3,696 ops/sec ±4.06% (55 runs sampled)
3,776 ops/sec ±3.95% (56 runs sampled)
3,716 ops/sec ±3.95% (56 runs sampled)
3743.9 ops/sec avg
Results from the
add-keyframesbranch3,651 ops/sec ±4.61% (52 runs sampled)
3,679 ops/sec ±4.54% (52 runs sampled)
3,633 ops/sec ±4.02% (55 runs sampled)
3,703 ops/sec ±3.91% (55 runs sampled)
3,709 ops/sec ±3.75% (55 runs sampled)
3,612 ops/sec ±4.19% (56 runs sampled)
3,666 ops/sec ±3.91% (55 runs sampled)
3,605 ops/sec ±7.42% (52 runs sampled)
3,655 ops/sec ±3.87% (55 runs sampled)
3,660 ops/sec ±4.04% (55 runs sampled)
3657.3 ops/sec
Demo of the
keyframesand animation functionality via Storybook: