Support webkit transition prefix

Author: cvle

docs/src/index.html

@@ -6,13 +6,13 @@
   <meta property="og:title" content="React CSS Transition" />
   <meta property="og:description" content="Take Control of your CSS Transitions" />
   <meta property="og:url" content="https://wikiwi.github.io/react-css-transition/" />
-  <meta property="og:image" content="https://wikiwi.github.io/react-css-transition/preview.png" />
+  <meta property="og:image" content="https://wikiwi.github.io/react-css-transition/preview.jpg" />
 
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:creator" content="@wikiwi_io" />
   <meta name="twitter:title" content="React CSS Transition" />
   <meta name="twitter:description" content="Take Control of your CSS Transitions" />
-  <meta name="twitter:image" content="https://wikiwi.github.io/react-css-transition/preview.png" />
+  <meta name="twitter:image" content="https://wikiwi.github.io/react-css-transition/preview.jpg" />
 
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width" />

docs/webpack.config.js

@@ -74,7 +74,7 @@ module.exports = {
   plugins: [
     new CopyWebpackPlugin([
       { from: "src/index.html" },
-      { from: "media/preview.png" },
+      { from: "media/preview.jpg" },
     ]),
     new webpack.DefinePlugin({
       "process.env": {

src/reducer.spec.ts

@@ -1,3 +1,5 @@
+// TODO: decouple resolveTransit from test
+
 import { assert } from "chai";
 
 import { transit } from "./transit";
@@ -56,7 +58,11 @@ describe("reducer.ts", () => {
       transitionNames.forEach((name) => {
         const id = StateID.EnterStarted;
         const style = { top: transit("5px", 120) };
-        const styleProcessed = { top: "5px", transition: "top 120ms ease 0ms" };
+        const styleProcessed = {
+          top: "5px",
+          transition: "top 120ms ease 0ms",
+          WebkitTransition: "top 120ms ease 0ms",
+        };
         const className = "foo";
         assert.deepEqual(
           getState(id, name, { [name + "Style"]: style, [name + "ClassName"]: className }), {
@@ -631,12 +637,20 @@ function testState(id: StateID, styleName: string, state: (props: ActionProps) =
     } else {
       it("should return transition style", () => {
         const style = { top: transit("5px", 120) };
-        const styleProcessed = { top: "5px", transition: "top 120ms ease 0ms" };
+        const styleProcessed = {
+          top: "5px",
+          transition: "top 120ms ease 0ms",
+          WebkitTransition: "top 120ms ease 0ms",
+        };
         assert.deepEqual(state({ ...extraProps, [styleName]: style }).style, styleProcessed);
       });
       it("should return transition style with extra delay", () => {
         const style = { top: transit("5px", 120, "ease", 10) };
-        const styleProcessed = { top: "5px", transition: "top 120ms ease 30ms" };
+        const styleProcessed = {
+          top: "5px",
+          transition: "top 120ms ease 30ms",
+          WebkitTransition: "top 120ms ease 30ms",
+        };
         assert.deepEqual(state({ ...extraProps, [styleName]: style, transitionDelay: 20 }).style, styleProcessed);
       });
     }

src/transit.spec.ts

@@ -2,6 +2,7 @@ import { assert } from "chai";
 import { CSSProperties } from "react";
 
 import { transit, resolveTransit } from "./transit";
+import pick from "./utils/pick";
 
 describe("transit.ts", () => {
   describe("transit", () => {
@@ -42,6 +43,10 @@ describe("transit.ts", () => {
         assert.strictEqual(result.transition, "width 50ms ease 20ms");
       });
 
+      it("should set WebkitTransition", () => {
+        assert.strictEqual((result as any).WebkitTransition, "width 50ms ease 20ms");
+      });
+
       it("should leave other properties untouched", () => {
         assert.strictEqual(result.height, "25px");
       });
@@ -70,28 +75,53 @@ describe("transit.ts", () => {
           "width 120ms ease 30ms, background 100ms linear 20ms");
       });
 
+      it("should set WebkitTransition", () => {
+        assert.strictEqual((result as any).WebkitTransition,
+          "width 120ms ease 30ms, background 100ms linear 20ms");
+      });
+
       it("should leave other properties untouched", () => {
         assert.strictEqual(result.height, "25px");
       });
     });
 
-    describe("when processing style with single transition and vendor prefix", () => {
+    describe("when processing style with multiple transition and vendor prefixes", () => {
       let style: CSSProperties;
       let result: CSSProperties;
 
       before(() => {
         style = {
-          WebkitTransform: transit("50px", 50, "ease", 20),
+          top: transit("50px", 50),
+          WebkitTransform: transit("scale(1.0)", 50),
+          MozTransform: transit("scale(1.0)", 50),
+          transform: transit("scale(1.0)", 50),
         };
         result = resolveTransit(style);
       });
 
       it("should turn TransitionConfig to value", () => {
-        assert.strictEqual(result["WebkitTransform"], "50px");
+        assert.deepEqual(pick(result, ...Object.keys(style)), {
+          top: "50px",
+          WebkitTransform: "scale(1.0)",
+          MozTransform: "scale(1.0)",
+          transform: "scale(1.0)",
+        });
       });
 
       it("should set transition with css prefix", () => {
-        assert.strictEqual(result.transition, "-webkit-transform 50ms ease 20ms");
+        assert.strictEqual(result.transition,
+          ["top", "-webkit-transform", "-moz-transform", "transform"].
+            map((p) => `${p} 50ms ease 0ms`).
+            join(", "),
+        );
+      });
+
+      it("should set WebkitTransition", () => {
+        assert.strictEqual((result as any).WebkitTransition,
+          ["top", "-webkit-transform"].
+            map((p) => `${p} 50ms ease 0ms`).
+            join(", "),
+        );
       });
     });
 

src/transit.ts

@@ -22,20 +22,30 @@ export function transit(value: any, duration: number, timing?: string, delay?: n
   return ret;
 }
 
+const nonWebkitPrefixRegexp = /^-(moz|ms|o)-/;
+
 export function resolveTransit(style: CSSProperties, extraDelay = 0): CSSProperties {
-  let transition = "";
+  let transitionList: string[] = [];
+  let propertyList: string[] = [];
   let processedStyle = { ...style };
   for (const property in style) {
     const val = style[property];
     if (Array.isArray(val) && (val as AugmentedArray).transitParams) {
       const {duration, timing, delay} = (val as AugmentedArray).transitParams;
-      if (transition !== "") { transition += ", "; }
-      transition += `${convertToCSSPrefix(property)} ${duration}ms ${timing} ${delay + extraDelay}ms`;
+      const name = convertToCSSPrefix(property);
+      const transition = `${name} ${duration}ms ${timing} ${delay + extraDelay}ms`;
+      transitionList.push(transition);
+      propertyList.push(name);
       processedStyle[property] = val[0];
     }
   }
-  if (transition) {
-    processedStyle.transition = transition;
+  if (transitionList.length > 0) {
+    processedStyle.transition = transitionList.join(", ");
+    (processedStyle as any).WebkitTransition = transitionList.
+      filter((item, i) =>
+        !propertyList[i].match(nonWebkitPrefixRegexp) &&
+        propertyList.indexOf("-webkit-" + propertyList[i]) < 0).
+      join(", ");
   }
   return processedStyle;
 }

test/integration/appear.test.tsx

@@ -15,7 +15,7 @@ describe("appear integration test", () => {
     const appearStyle: CSSProperties = { width: transit("100px", 150, "ease", 25) };
     const leaveStyle: CSSProperties = { width: transit("50px", 150, "ease", 25) };
     const transition = "width 150ms ease 25ms";
-    const appearStyleProcessed: CSSProperties = { width: "100px", transition };
+    const appearStyleProcessed: CSSProperties = { width: "100px", transition, WebkitTransition: transition };
     let onTransitionComplete: SinonSpy;
     let getWrapper: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;
 

test/integration/basic.test.tsx

@@ -16,8 +16,8 @@ describe("basic integration test", () => {
     const enterStyle: CSSProperties = { width: transit("100px", 150, "ease", 25) };
     const leaveStyle: CSSProperties = { width: transit("50px", 150, "ease", 25) };
     const transition = "width 150ms ease 25ms";
-    const enterStyleProcessed: CSSProperties = { width: "100px", transition };
-    const leaveStyleProcessed: CSSProperties = { width: "50px", transition };
+    const enterStyleProcessed: CSSProperties = { width: "100px", transition, WebkitTransition: transition };
+    const leaveStyleProcessed: CSSProperties = { width: "50px", transition, WebkitTransition: transition };
     let onTransitionComplete: SinonSpy;
     let getWrapper: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;
     let getWrapperAttached: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;