@fluentui/react-motion-components-preview 0.6.0 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -1
- package/dist/index.d.ts +4 -4
- package/lib/atoms/scale-atom.js +27 -0
- package/lib/atoms/scale-atom.js.map +1 -0
- package/lib/components/Scale/Scale.js +33 -41
- package/lib/components/Scale/Scale.js.map +1 -1
- package/lib-commonjs/atoms/scale-atom.js +29 -0
- package/lib-commonjs/atoms/scale-atom.js.map +1 -0
- package/lib-commonjs/components/Scale/Scale.js +33 -41
- package/lib-commonjs/components/Scale/Scale.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-motion-components-preview
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 26 Jun 2025 14:07:52 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.6.2)
|
|
8
|
+
|
|
9
|
+
Thu, 26 Jun 2025 14:07:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.5.0..@fluentui/react-motion-components-preview_v0.6.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix(Scale): update variant parameters to design spec & refactor internally ([PR #34712](https://github.com/microsoft/fluentui/pull/34712) by robertpenner@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.5.0)
|
|
8
17
|
|
|
9
18
|
Wed, 14 May 2025 18:49:17 GMT
|
package/dist/index.d.ts
CHANGED
|
@@ -94,13 +94,13 @@ export declare const ScaleRelaxed: PresenceComponent<ScaleVariantParams>;
|
|
|
94
94
|
export declare const ScaleSnappy: PresenceComponent<ScaleVariantParams>;
|
|
95
95
|
|
|
96
96
|
declare type ScaleVariantParams = {
|
|
97
|
-
/** Time (ms) for the enter transition (scale-in). Defaults to the `
|
|
97
|
+
/** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */
|
|
98
98
|
duration?: number;
|
|
99
|
-
/** Easing curve for the enter transition (scale-in). Defaults to the `
|
|
99
|
+
/** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value. */
|
|
100
100
|
easing?: string;
|
|
101
|
-
/** Time (ms) for the exit transition (scale-out). Defaults to the `
|
|
101
|
+
/** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */
|
|
102
102
|
exitDuration?: number;
|
|
103
|
-
/** Easing curve for the exit transition (scale-out). Defaults to the `
|
|
103
|
+
/** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value. */
|
|
104
104
|
exitEasing?: string;
|
|
105
105
|
/** The scale value to animate from. Defaults to `0.9`. */
|
|
106
106
|
fromScale?: number;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { motionTokens } from '@fluentui/react-motion';
|
|
2
|
+
/**
|
|
3
|
+
* Generates a motion atom object for a scale in or scale out.
|
|
4
|
+
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
|
|
5
|
+
* @param duration - The duration of the motion in milliseconds.
|
|
6
|
+
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
|
|
7
|
+
* @param fromValue - The starting scale value. Defaults to 0.9.
|
|
8
|
+
* @param toValue - The ending scale value. Defaults to 1.
|
|
9
|
+
* @returns A motion atom object with scale keyframes and the supplied duration and easing.
|
|
10
|
+
*/ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0.9, toValue = 1 })=>{
|
|
11
|
+
const keyframes = [
|
|
12
|
+
{
|
|
13
|
+
scale: fromValue
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
scale: toValue
|
|
17
|
+
}
|
|
18
|
+
];
|
|
19
|
+
if (direction === 'exit') {
|
|
20
|
+
keyframes.reverse();
|
|
21
|
+
}
|
|
22
|
+
return {
|
|
23
|
+
keyframes,
|
|
24
|
+
duration,
|
|
25
|
+
easing
|
|
26
|
+
};
|
|
27
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n toValue?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting scale value. Defaults to 0.9.\n * @param toValue - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0.9,\n toValue = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: fromValue }, { scale: toValue }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","fromValue","toValue","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIL,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}
|
|
@@ -1,53 +1,45 @@
|
|
|
1
1
|
import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const enterKeyframes = [
|
|
9
|
-
{
|
|
10
|
-
opacity: fromOpacity,
|
|
11
|
-
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
12
|
-
visibility: 'visible'
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
opacity: toOpacity,
|
|
16
|
-
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
17
|
-
}
|
|
18
|
-
];
|
|
19
|
-
const exitKeyframes = [
|
|
20
|
-
{
|
|
21
|
-
opacity: toOpacity,
|
|
22
|
-
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
opacity: fromOpacity,
|
|
26
|
-
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
27
|
-
visibility: 'hidden'
|
|
28
|
-
}
|
|
29
|
-
];
|
|
30
|
-
return {
|
|
31
|
-
enter: {
|
|
2
|
+
import { fadeAtom } from '../../atoms/fade-atom';
|
|
3
|
+
import { scaleAtom } from '../../atoms/scale-atom';
|
|
4
|
+
/** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
|
|
5
|
+
const enterAtoms = [
|
|
6
|
+
scaleAtom({
|
|
7
|
+
direction: 'enter',
|
|
32
8
|
duration,
|
|
33
9
|
easing,
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
10
|
+
fromValue: fromScale
|
|
11
|
+
})
|
|
12
|
+
];
|
|
13
|
+
const exitAtoms = [
|
|
14
|
+
scaleAtom({
|
|
15
|
+
direction: 'exit',
|
|
37
16
|
duration: exitDuration,
|
|
38
17
|
easing: exitEasing,
|
|
39
|
-
|
|
40
|
-
}
|
|
18
|
+
fromValue: fromScale
|
|
19
|
+
})
|
|
20
|
+
];
|
|
21
|
+
// Only add fade atoms if animateOpacity is true.
|
|
22
|
+
if (animateOpacity) {
|
|
23
|
+
enterAtoms.push(fadeAtom({
|
|
24
|
+
direction: 'enter',
|
|
25
|
+
duration,
|
|
26
|
+
easing
|
|
27
|
+
}));
|
|
28
|
+
exitAtoms.push(fadeAtom({
|
|
29
|
+
direction: 'exit',
|
|
30
|
+
duration: exitDuration,
|
|
31
|
+
easing: exitEasing
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
34
|
+
return {
|
|
35
|
+
enter: enterAtoms,
|
|
36
|
+
exit: exitAtoms
|
|
41
37
|
};
|
|
42
38
|
};
|
|
43
39
|
/** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(scalePresenceFn);
|
|
44
40
|
export const ScaleSnappy = createPresenceComponentVariant(Scale, {
|
|
45
|
-
duration: motionTokens.
|
|
46
|
-
easing: motionTokens.curveDecelerateMax,
|
|
47
|
-
exitEasing: motionTokens.curveAccelerateMax
|
|
41
|
+
duration: motionTokens.durationNormal
|
|
48
42
|
});
|
|
49
43
|
export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
|
|
50
|
-
duration: motionTokens.
|
|
51
|
-
easing: motionTokens.curveDecelerateMid,
|
|
52
|
-
exitEasing: motionTokens.curveAccelerateMid
|
|
44
|
+
duration: motionTokens.durationSlow
|
|
53
45
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\ntype ScaleVariantParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\n\ntype ScaleVariantParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value. */\n exitEasing?: string;\n\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromValue: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromValue: fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","direction","fromValue","exitAtoms","push","enter","exit","Scale","ScaleSnappy","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAsBnD,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeV,aAAaW,cAAc,EAC1CC,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQU,WAAWJ;QAAU;KAAG;IAC9F,MAAMK,YAAY;QAChBf,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQI;YACRM,WAAWJ;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACjB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEW,UAAUC,IAAI,CAACjB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAOL;QACPM,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQtB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMmB,cAActB,+BAA+BqB,OAAO;IAC/DjB,UAAUN,aAAaW,cAAc;AACvC,GAAG;AAEH,OAAO,MAAMc,eAAevB,+BAA+BqB,OAAO;IAChEjB,UAAUN,aAAa0B,YAAY;AACrC,GAAG"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "scaleAtom", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return scaleAtom;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
12
|
+
const scaleAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromValue = 0.9, toValue = 1 })=>{
|
|
13
|
+
const keyframes = [
|
|
14
|
+
{
|
|
15
|
+
scale: fromValue
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
scale: toValue
|
|
19
|
+
}
|
|
20
|
+
];
|
|
21
|
+
if (direction === 'exit') {
|
|
22
|
+
keyframes.reverse();
|
|
23
|
+
}
|
|
24
|
+
return {
|
|
25
|
+
keyframes,
|
|
26
|
+
duration,
|
|
27
|
+
easing
|
|
28
|
+
};
|
|
29
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n toValue?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting scale value. Defaults to 0.9.\n * @param toValue - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0.9,\n toValue = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: fromValue }, { scale: toValue }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["scaleAtom","direction","duration","easing","motionTokens","curveLinear","fromValue","toValue","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
|
|
@@ -20,55 +20,47 @@ _export(exports, {
|
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
22
|
const _reactmotion = require("@fluentui/react-motion");
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const enterKeyframes = [
|
|
30
|
-
{
|
|
31
|
-
opacity: fromOpacity,
|
|
32
|
-
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
33
|
-
visibility: 'visible'
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
opacity: toOpacity,
|
|
37
|
-
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
38
|
-
}
|
|
39
|
-
];
|
|
40
|
-
const exitKeyframes = [
|
|
41
|
-
{
|
|
42
|
-
opacity: toOpacity,
|
|
43
|
-
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
opacity: fromOpacity,
|
|
47
|
-
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
48
|
-
visibility: 'hidden'
|
|
49
|
-
}
|
|
50
|
-
];
|
|
51
|
-
return {
|
|
52
|
-
enter: {
|
|
23
|
+
const _fadeatom = require("../../atoms/fade-atom");
|
|
24
|
+
const _scaleatom = require("../../atoms/scale-atom");
|
|
25
|
+
/** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
|
|
26
|
+
const enterAtoms = [
|
|
27
|
+
(0, _scaleatom.scaleAtom)({
|
|
28
|
+
direction: 'enter',
|
|
53
29
|
duration,
|
|
54
30
|
easing,
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
|
|
31
|
+
fromValue: fromScale
|
|
32
|
+
})
|
|
33
|
+
];
|
|
34
|
+
const exitAtoms = [
|
|
35
|
+
(0, _scaleatom.scaleAtom)({
|
|
36
|
+
direction: 'exit',
|
|
58
37
|
duration: exitDuration,
|
|
59
38
|
easing: exitEasing,
|
|
60
|
-
|
|
61
|
-
}
|
|
39
|
+
fromValue: fromScale
|
|
40
|
+
})
|
|
41
|
+
];
|
|
42
|
+
// Only add fade atoms if animateOpacity is true.
|
|
43
|
+
if (animateOpacity) {
|
|
44
|
+
enterAtoms.push((0, _fadeatom.fadeAtom)({
|
|
45
|
+
direction: 'enter',
|
|
46
|
+
duration,
|
|
47
|
+
easing
|
|
48
|
+
}));
|
|
49
|
+
exitAtoms.push((0, _fadeatom.fadeAtom)({
|
|
50
|
+
direction: 'exit',
|
|
51
|
+
duration: exitDuration,
|
|
52
|
+
easing: exitEasing
|
|
53
|
+
}));
|
|
54
|
+
}
|
|
55
|
+
return {
|
|
56
|
+
enter: enterAtoms,
|
|
57
|
+
exit: exitAtoms
|
|
62
58
|
};
|
|
63
59
|
};
|
|
64
60
|
const Scale = (0, _reactmotion.createPresenceComponent)(scalePresenceFn);
|
|
65
61
|
const ScaleSnappy = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
|
|
66
|
-
duration: _reactmotion.motionTokens.
|
|
67
|
-
easing: _reactmotion.motionTokens.curveDecelerateMax,
|
|
68
|
-
exitEasing: _reactmotion.motionTokens.curveAccelerateMax
|
|
62
|
+
duration: _reactmotion.motionTokens.durationNormal
|
|
69
63
|
});
|
|
70
64
|
const ScaleRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
|
|
71
|
-
duration: _reactmotion.motionTokens.
|
|
72
|
-
easing: _reactmotion.motionTokens.curveDecelerateMid,
|
|
73
|
-
exitEasing: _reactmotion.motionTokens.curveAccelerateMid
|
|
65
|
+
duration: _reactmotion.motionTokens.durationSlow
|
|
74
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\ntype ScaleVariantParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\n\ntype ScaleVariantParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value. */\n exitEasing?: string;\n\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromValue: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromValue: fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","fromValue","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6DaA,KAAK;eAALA;;IAMAC,YAAY;eAAZA;;IAJAC,WAAW;eAAXA;;;6BA1DN;0BACkB;2BACC;AAsB1B,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQW,WAAWL;QAAU;KAAG;IAC9F,MAAMM,YAAY;QAChBH,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRO,WAAWL;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWK,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEJ,WAAW;YAASb;YAAUG;QAAO;QAChEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEJ,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLW,OAAOP;QACPQ,MAAMJ;IACR;AACF;AAGO,MAAMnB,QAAQwB,IAAAA,oCAAuB,EAACrB;AAEtC,MAAMD,cAAcuB,IAAAA,2CAA8B,EAACzB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;AACvC;AAEO,MAAMT,eAAewB,IAAAA,2CAA8B,EAACzB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;AACrC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-motion-components-preview",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"description": "A preview package for Fluent UI motion components, providing a collection of components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|