Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Commit 35c45a6

Browse files
committed
Support webkit transition prefix
1 parent 12a48ef commit 35c45a6

File tree

7 files changed

+72
-18
lines changed

7 files changed

+72
-18
lines changed

‎docs/src/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
<meta property="og:title" content="React CSS Transition" />
77
<meta property="og:description" content="Take Control of your CSS Transitions" />
88
<meta property="og:url" content="https://wikiwi.github.io/react-css-transition/" />
9-
<meta property="og:image" content="https://wikiwi.github.io/react-css-transition/preview.png" />
9+
<meta property="og:image" content="https://wikiwi.github.io/react-css-transition/preview.jpg" />
1010

1111
<meta name="twitter:card" content="summary_large_image" />
1212
<meta name="twitter:creator" content="@wikiwi_io" />
1313
<meta name="twitter:title" content="React CSS Transition" />
1414
<meta name="twitter:description" content="Take Control of your CSS Transitions" />
15-
<meta name="twitter:image" content="https://wikiwi.github.io/react-css-transition/preview.png" />
15+
<meta name="twitter:image" content="https://wikiwi.github.io/react-css-transition/preview.jpg" />
1616

1717
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
1818
<meta name="viewport" content="width=device-width" />

‎docs/webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ module.exports = {
7474
plugins: [
7575
new CopyWebpackPlugin([
7676
{ from: "src/index.html" },
77-
{ from: "media/preview.png" },
77+
{ from: "media/preview.jpg" },
7878
]),
7979
new webpack.DefinePlugin({
8080
"process.env": {

‎src/reducer.spec.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// TODO: decouple resolveTransit from test
2+
13
import { assert } from "chai";
24

35
import { transit } from "./transit";
@@ -56,7 +58,11 @@ describe("reducer.ts", () => {
5658
transitionNames.forEach((name) => {
5759
const id = StateID.EnterStarted;
5860
const style = { top: transit("5px", 120) };
59-
const styleProcessed = { top: "5px", transition: "top 120ms ease 0ms" };
61+
const styleProcessed = {
62+
top: "5px",
63+
transition: "top 120ms ease 0ms",
64+
WebkitTransition: "top 120ms ease 0ms",
65+
};
6066
const className = "foo";
6167
assert.deepEqual(
6268
getState(id, name, { [name + "Style"]: style, [name + "ClassName"]: className }), {
@@ -631,12 +637,20 @@ function testState(id: StateID, styleName: string, state: (props: ActionProps) =
631637
} else {
632638
it("should return transition style", () => {
633639
const style = { top: transit("5px", 120) };
634-
const styleProcessed = { top: "5px", transition: "top 120ms ease 0ms" };
640+
const styleProcessed = {
641+
top: "5px",
642+
transition: "top 120ms ease 0ms",
643+
WebkitTransition: "top 120ms ease 0ms",
644+
};
635645
assert.deepEqual(state({ ...extraProps, [styleName]: style }).style, styleProcessed);
636646
});
637647
it("should return transition style with extra delay", () => {
638648
const style = { top: transit("5px", 120, "ease", 10) };
639-
const styleProcessed = { top: "5px", transition: "top 120ms ease 30ms" };
649+
const styleProcessed = {
650+
top: "5px",
651+
transition: "top 120ms ease 30ms",
652+
WebkitTransition: "top 120ms ease 30ms",
653+
};
640654
assert.deepEqual(state({ ...extraProps, [styleName]: style, transitionDelay: 20 }).style, styleProcessed);
641655
});
642656
}

‎src/transit.spec.ts

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { assert } from "chai";
22
import { CSSProperties } from "react";
33

44
import { transit, resolveTransit } from "./transit";
5+
import pick from "./utils/pick";
56

67
describe("transit.ts", () => {
78
describe("transit", () => {
@@ -42,6 +43,10 @@ describe("transit.ts", () => {
4243
assert.strictEqual(result.transition, "width 50ms ease 20ms");
4344
});
4445

46+
it("should set WebkitTransition", () => {
47+
assert.strictEqual((result as any).WebkitTransition, "width 50ms ease 20ms");
48+
});
49+
4550
it("should leave other properties untouched", () => {
4651
assert.strictEqual(result.height, "25px");
4752
});
@@ -70,28 +75,53 @@ describe("transit.ts", () => {
7075
"width 120ms ease 30ms, background 100ms linear 20ms");
7176
});
7277

78+
it("should set WebkitTransition", () => {
79+
assert.strictEqual((result as any).WebkitTransition,
80+
"width 120ms ease 30ms, background 100ms linear 20ms");
81+
});
82+
7383
it("should leave other properties untouched", () => {
7484
assert.strictEqual(result.height, "25px");
7585
});
7686
});
7787

78-
describe("when processing style with single transition and vendor prefix", () => {
88+
describe("when processing style with multiple transition and vendor prefixes", () => {
7989
let style: CSSProperties;
8090
let result: CSSProperties;
8191

8292
before(() => {
8393
style = {
84-
WebkitTransform: transit("50px", 50, "ease", 20),
94+
top: transit("50px", 50),
95+
WebkitTransform: transit("scale(1.0)", 50),
96+
MozTransform: transit("scale(1.0)", 50),
97+
transform: transit("scale(1.0)", 50),
8598
};
8699
result = resolveTransit(style);
87100
});
88101

89102
it("should turn TransitionConfig to value", () => {
90-
assert.strictEqual(result["WebkitTransform"], "50px");
103+
assert.deepEqual(pick(result, ...Object.keys(style)), {
104+
top: "50px",
105+
WebkitTransform: "scale(1.0)",
106+
MozTransform: "scale(1.0)",
107+
transform: "scale(1.0)",
108+
});
91109
});
92110

93111
it("should set transition with css prefix", () => {
94-
assert.strictEqual(result.transition, "-webkit-transform 50ms ease 20ms");
112+
assert.strictEqual(result.transition,
113+
["top", "-webkit-transform", "-moz-transform", "transform"].
114+
map((p) => `${p} 50ms ease 0ms`).
115+
join(", "),
116+
);
117+
});
118+
119+
it("should set WebkitTransition", () => {
120+
assert.strictEqual((result as any).WebkitTransition,
121+
["top", "-webkit-transform"].
122+
map((p) => `${p} 50ms ease 0ms`).
123+
join(", "),
124+
);
95125
});
96126
});
97127

‎src/transit.ts

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,30 @@ export function transit(value: any, duration: number, timing?: string, delay?: n
2222
return ret;
2323
}
2424

25+
const nonWebkitPrefixRegexp = /^-(moz|ms|o)-/;
26+
2527
export function resolveTransit(style: CSSProperties, extraDelay = 0): CSSProperties {
26-
let transition = "";
28+
let transitionList: string[] = [];
29+
let propertyList: string[] = [];
2730
let processedStyle = { ...style };
2831
for (const property in style) {
2932
const val = style[property];
3033
if (Array.isArray(val) && (val as AugmentedArray).transitParams) {
3134
const {duration, timing, delay} = (val as AugmentedArray).transitParams;
32-
if (transition !== "") { transition += ", "; }
33-
transition += `${convertToCSSPrefix(property)} ${duration}ms ${timing} ${delay + extraDelay}ms`;
35+
const name = convertToCSSPrefix(property);
36+
const transition = `${name} ${duration}ms ${timing} ${delay + extraDelay}ms`;
37+
transitionList.push(transition);
38+
propertyList.push(name);
3439
processedStyle[property] = val[0];
3540
}
3641
}
37-
if (transition) {
38-
processedStyle.transition = transition;
42+
if (transitionList.length > 0) {
43+
processedStyle.transition = transitionList.join(", ");
44+
(processedStyle as any).WebkitTransition = transitionList.
45+
filter((item, i) =>
46+
!propertyList[i].match(nonWebkitPrefixRegexp) &&
47+
propertyList.indexOf("-webkit-" + propertyList[i]) < 0).
48+
join(", ");
3949
}
4050
return processedStyle;
4151
}

‎test/integration/appear.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ describe("appear integration test", () => {
1515
const appearStyle: CSSProperties = { width: transit("100px", 150, "ease", 25) };
1616
const leaveStyle: CSSProperties = { width: transit("50px", 150, "ease", 25) };
1717
const transition = "width 150ms ease 25ms";
18-
const appearStyleProcessed: CSSProperties = { width: "100px", transition };
18+
const appearStyleProcessed: CSSProperties = { width: "100px", transition,WebkitTransition: transition };
1919
let onTransitionComplete: SinonSpy;
2020
let getWrapper: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;
2121

‎test/integration/basic.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ describe("basic integration test", () => {
1616
const enterStyle: CSSProperties = { width: transit("100px", 150, "ease", 25) };
1717
const leaveStyle: CSSProperties = { width: transit("50px", 150, "ease", 25) };
1818
const transition = "width 150ms ease 25ms";
19-
const enterStyleProcessed: CSSProperties = { width: "100px", transition };
20-
const leaveStyleProcessed: CSSProperties = { width: "50px", transition };
19+
const enterStyleProcessed: CSSProperties = { width: "100px", transition,WebkitTransition: transition };
20+
const leaveStyleProcessed: CSSProperties = { width: "50px", transition,WebkitTransition: transition };
2121
let onTransitionComplete: SinonSpy;
2222
let getWrapper: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;
2323
let getWrapperAttached: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /