feat(hiccup-css): add animation(), add test & update readme

thi-ng · Dec 15, 2018 · aac8b6f · aac8b6f
1 parent 3b3e503
commit aac8b6f
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 1 deletion.
diff --git a/packages/hiccup-css/README.md b/packages/hiccup-css/README.md
@@ -27,6 +27,7 @@ This project is part of the
         - [Auto-prefixed properties](#auto-prefixed-properties)
         - [Media queries](#media-queries)
         - [Keyframes](#keyframes)
+        - [Animations](#animations)
         - [DOM stylesheet injection](#dom-stylesheet-injection)
         - [General function handling](#general-function-handling)
             - [Functions in scope head position](#functions-in-scope-head-position)
@@ -458,6 +459,43 @@ css.css(
 }
 ```
 
+### Animations
+
+Animations can be defined via the `animation()` function and define new
+`@keyframes` with given `id` and related class of same name to configure
+given animation `opts`. Only the `duration`option is given a default
+value (250ms), all others are optional.
+
+```ts
+css(
+  animation(
+    "delayed-fade-in",
+    { delay: "0.5s" },
+    { opacity: 0 },
+    { opacity: 1 }
+  )
+);
+```
+
+Results in:
+
+```css
+@keyframes delayed-fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.delayed-fade-in {
+    animation-duration: 250ms;
+    animation-name: delayed-fade-in;
+    animation-delay: 0.5s;
+}
+```
+
 ### DOM stylesheet injection
 
 CSS strings can be installed into the DOM `<head>` element via `injectStyleSheet()`:

diff --git a/packages/hiccup-css/src/animation.ts b/packages/hiccup-css/src/animation.ts
@@ -0,0 +1,64 @@
+import { at_keyframes } from "./keyframes";
+
+export interface AnimationOpts {
+    delay: string;
+    direction: "unset" | "inherit" | "initial" | "normal" | "reverse" | "alternate" | "alternate-reverse";
+    duration: string;
+    "fill-mode": "none" | "forwards" | "backwards" | "both";
+    "iteration-count": number;
+    "play-state": "unset" | "inherit" | "initial" | "paused" | "running";
+    "timing-function": string;
+}
+
+/**
+ * Defines new `@keyframes` with given `id` and creates related class of
+ * same name to configure given animation `opts`. Only the `duration`
+ * option is given a default value (250ms), all others are optional.
+ *
+ * ```
+ * css(
+ *   animation(
+ *     "fadein",
+ *     { delay: "0.5s" },
+ *     { opacity: 0 },
+ *     { opacity: 1 }
+ *   )
+ * );
+ * ```
+ *
+ * ```css
+ * @keyframes fadein {
+ *     0% {
+ *         opacity: 0;
+ *     }
+ *     100% {
+ *         opacity: 1;
+ *     }
+ * }
+ *
+ * .fadein {
+ *     animation-duration: 250ms;
+ *     animation-name: fadein;
+ *     animation-delay: 0.5s;
+ * }
+ * ```
+ *
+ * @param id
+ * @param opts
+ * @param keyframes
+ */
+export const animation =
+    (id: string, opts: Partial<AnimationOpts>, ...keyframes: any) => {
+        opts = <any>{
+            duration: "250ms",
+            name: id,
+            ...opts
+        };
+        return [
+            at_keyframes.apply(null, [id, ...keyframes]),
+            [
+                `.${id}`,
+                Object.keys(opts).reduce((acc, k) => (acc[`animation-${k}`] = opts[k], acc), {})
+            ]
+        ];
+    };
diff --git a/packages/hiccup-css/src/index.ts b/packages/hiccup-css/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./api";
+export * from "./animation";
 export * from "./attribs";
 export * from "./comment";
 export * from "./conditional";

diff --git a/packages/hiccup-css/test/index.ts b/packages/hiccup-css/test/index.ts
@@ -1,6 +1,6 @@
 import * as assert from "assert";
 
-import { css, PRETTY, at_import, at_keyframes, at_media } from "../src";
+import { css, PRETTY, at_import, at_keyframes, at_media, animation } from "../src";
 
 const rules = {
     a: { color: "red" },
@@ -128,4 +128,18 @@ describe("hiccup-css", () => {
             "@media screen and print{div .foo{color:red;}@media print and (max-width:20rem){div{border:0;}}}"
         );
     });
+
+    it("animation", () => {
+        assert.equal(
+            css(
+                animation(
+                    "delayed-fade-in",
+                    { delay: "0.5s" },
+                    { opacity: 0 },
+                    { opacity: 1 }
+                )
+            ),
+            "@keyframes delayed-fade-in{0%{opacity:0;}100%{opacity:1;}}.delayed-fade-in{animation-duration:250ms;animation-name:delayed-fade-in;animation-delay:0.5s;}"
+        );
+    });
 });