Skip to content

Commit 6a8776a

Browse files
igorMSoaresigorMSoares
committed
refactor: rename 'keepSpace' to 'maintainSpace' and 'timingFunction' to 'easing'
1 parent 925ebe9 commit 6a8776a

File tree

8 files changed

+31
-33
lines changed

8 files changed

+31
-33
lines changed

‎docs/.vitepress/components/AnimationForm.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@
3939
transfOrigin: initial?.transfOrigin ?? defaultValue.transfOrigin,
4040
initialScale: initial?.initialScale ?? defaultValue.initialScale,
4141
finalScale: initial?.finalScale ?? defaultValue.finalScale,
42-
easing: initial?.timingFunction ?? defaultValue.easing,
43-
maintainSpace: initial?.keepSpace ?? defaultValue.maintainSpace,
42+
easing: initial?.easing ?? defaultValue.easing,
43+
maintainSpace: initial?.maintainSpace ?? defaultValue.maintainSpace,
4444
dimensionsTransition:
45-
initial?.dimensionsTransition ?? initial?.keepSpace
45+
initial?.dimensionsTransition ?? initial?.maintainSpace
4646
? false
4747
: defaultValue.dimensionsTransition,
4848
overflowHidden: initial?.overflowHidden ?? defaultValue.overflowHidden,

‎docs/examples/index.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ aside: false
5555
}
5656

5757
const fadeOpts = {
58-
keepSpace: true,
58+
maintainSpace: true,
5959
}
6060
function fadeAnimation() {
6161
jsCssAnimations.init.fade({
@@ -101,14 +101,14 @@ aside: false
101101
duration: '800ms',
102102
delay: '0ms',
103103
staggerDelay: '0ms',
104-
timingFunction: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
104+
easing: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
105105
blur: '0.5px'
106106
}
107107

108108
if (opts.maintainSpace) opts.dimensionsTransition = false;
109109
if (!validateAnimationFormField.blur(opts.blur)) opts.blur = defaultValue.blur;
110110
if (!validateAnimationFormField.easing(opts.easing))
111-
opts.easing = defaultValue.timingFunction;
111+
opts.easing = defaultValue.easing;
112112
['duration', 'delay', 'staggerDelay'].forEach(prop => {
113113
if (opts[prop].match(/^(\d+|\d+\.\d+)$/)) opts[prop] = `${opts[prop]}ms`;
114114
else if (!validateAnimationFormField[prop](opts[prop])) {
@@ -123,8 +123,6 @@ aside: false
123123
jsCssAnimations.init[animation]({
124124
trigger: triggerSelector,
125125
...opts,
126-
timingFunction: opts.easing,
127-
keepSpace: opts.maintainSpace,
128126
complete: () => toggleBtnHandler(animName)
129127
});
130128
document.querySelector(triggerSelector).click();

‎js-css-animations/animate.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const configurations = {
3737
staggerDelay: undefined,
3838
start: undefined,
3939
complete: undefined,
40-
keepSpace: false,
40+
maintainSpace: false,
4141
dimensionsTransition: true,
4242
widthTransition: undefined,
4343
heightTransition: undefined,
@@ -376,7 +376,7 @@ const handleVisibilityToggle = (element, args) => {
376376
*/
377377
const endVisibilityToggle = (element, opts) => {
378378
if (opts.action === 'hide') {
379-
opts.keepSpace
379+
opts.maintainSpace
380380
? element.classList.add(CLASS_NAMES.hidden)
381381
: element.classList.add(CLASS_NAMES.collapsed);
382382
}
@@ -426,8 +426,8 @@ const animate = (element, action, id, opts = {}) => {
426426
trigger,
427427
start = CONFIG.start,
428428
complete = CONFIG.complete,
429-
keepSpace = CONFIG.keepSpace,
430-
dimensionsTransition = keepSpace || isMotion(animType)
429+
maintainSpace = CONFIG.maintainSpace,
430+
dimensionsTransition = maintainSpace || isMotion(animType)
431431
? false
432432
: CONFIG.dimensionsTransition,
433433
widthTransition = CONFIG.widthTransition ?? dimensionsTransition,
@@ -485,7 +485,7 @@ const animate = (element, action, id, opts = {}) => {
485485
visibility: () => {
486486
endVisibilityToggle(element, {
487487
action,
488-
keepSpace,
488+
maintainSpace,
489489
widthTransition,
490490
heightTransition,
491491
overflowHidden,

‎js-css-animations/globals.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const MOTION_ANIMS_ID = Object.freeze({
5353
*/
5454
export const PROPERTY_NAMES = Object.freeze({
5555
duration: '--js-css-animation--duration',
56-
timingFunction: '--js-css-animation--timing-function',
56+
easing: '--js-css-animation--timing-function',
5757
delay: '--js-css-animation--delay',
5858
fillMode: '--js-css-animation--fill-mode',
5959
cursor: '--js-css-animation--cursor',

‎js-css-animations/js-css-animations.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,11 @@ const reset = () => {
9999
* duration: number|string|undefined,
100100
* delay: number|string|undefined,
101101
* staggerDelay: number|string|undefined,
102-
* timingFunction: string|undefined,
102+
* easing: string|undefined,
103103
* blur: string|undefined,
104104
* angle: string|undefined,
105105
* iteration: string|undefined,
106-
* keepSpace: boolean|undefined,
106+
* maintainSpace: boolean|undefined,
107107
* overflowHidden: boolean|undefined,
108108
* dimensionsTransition: boolean|undefined,
109109
* widthTransition: boolean|undefined,
@@ -116,13 +116,13 @@ const toggle = (selector, animA, animB, opts = {}) => {
116116
'duration',
117117
'delay',
118118
'staggerDelay',
119-
'timingFunction',
119+
'easing',
120120
'blur',
121121
'angle',
122122
'iteration',
123123
'direction',
124124
'transfOrigin',
125-
'keepSpace',
125+
'maintainSpace',
126126
'overflowHidden',
127127
'dimensionsTransition',
128128
'widthTransition',
@@ -182,7 +182,7 @@ const animationFunctions = (function () {
182182
[
183183
'start',
184184
'complete',
185-
'keepSpace',
185+
'maintainSpace',
186186
'overflowHidden',
187187
'staggerDelay',
188188
'widthTransition',

‎jsdoc/doc/animate.js.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ <h1 class="page-title">Source: animate.js</h1>
5757
staggerDelay: undefined,
5858
start: undefined,
5959
complete: undefined,
60-
keepSpace: false,
60+
maintainSpace: false,
6161
dimensionsTransition: true,
6262
widthTransition: undefined,
6363
heightTransition: undefined,
@@ -369,14 +369,14 @@ <h1 class="page-title">Source: animate.js</h1>
369369
* parentMeasures: Object,
370370
* action: string,
371371
* dimension: string | undefined,
372-
* keepSpace: boolean
372+
* maintainSpace: boolean
373373
* }} args - All the necessary arguments
374374
*/
375375
const handleVisibilityToggle = (element, args) => {
376376
setTimeout(() => {
377377
if (args.dimension) setParentMaxMeasures(args);
378378
if (args.action === 'show') {
379-
args.keepSpace
379+
args.maintainSpace
380380
? element.classList.remove(CLASS_NAMES.hidden)
381381
: element.classList.remove(CLASS_NAMES.collapsed);
382382
}
@@ -391,7 +391,7 @@ <h1 class="page-title">Source: animate.js</h1>
391391
*/
392392
const endVisibilityToggle = (element, opts) => {
393393
if (opts.action === 'hide') {
394-
opts.keepSpace
394+
opts.maintainSpace
395395
? element.classList.add(CLASS_NAMES.hidden)
396396
: element.classList.add(CLASS_NAMES.collapsed);
397397
}
@@ -439,8 +439,8 @@ <h1 class="page-title">Source: animate.js</h1>
439439
trigger,
440440
start = CONFIG.start,
441441
complete = CONFIG.complete,
442-
keepSpace = CONFIG.keepSpace,
443-
dimensionsTransition = keepSpace || isMotion(animType)
442+
maintainSpace = CONFIG.maintainSpace,
443+
dimensionsTransition = maintainSpace || isMotion(animType)
444444
? false
445445
: CONFIG.dimensionsTransition,
446446
widthTransition = CONFIG.widthTransition ?? dimensionsTransition,
@@ -484,7 +484,7 @@ <h1 class="page-title">Source: animate.js</h1>
484484
parentMeasures,
485485
action,
486486
dimension,
487-
keepSpace,
487+
maintainSpace,
488488
});
489489
},
490490
motion: () => {
@@ -498,7 +498,7 @@ <h1 class="page-title">Source: animate.js</h1>
498498
visibility: () => {
499499
endVisibilityToggle(element, {
500500
action,
501-
keepSpace,
501+
maintainSpace,
502502
widthTransition,
503503
heightTransition,
504504
});

‎jsdoc/doc/globals.js.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ <h1 class="page-title">Source: globals.js</h1>
7878
*/
7979
export const PROPERTY_NAMES = Object.freeze({
8080
duration: '--js-css-animation--duration',
81-
timingFunction: '--js-css-animation--timing-function',
81+
easing: '--js-css-animation--timing-function',
8282
delay: '--js-css-animation--delay',
8383
fillMode: '--js-css-animation--fill-mode',
8484
cursor: '--js-css-animation--cursor',

‎jsdoc/doc/js-css-animations.js.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,11 +123,11 @@ <h1 class="page-title">Source: js-css-animations.js</h1>
123123
* duration: number|string|undefined,
124124
* delay: number|string|undefined,
125125
* staggerDelay: number|string|undefined,
126-
* timingFunction: string|undefined,
126+
* easing: string|undefined,
127127
* blur: string|undefined,
128128
* angle: string|undefined,
129129
* iteration: string|undefined,
130-
* keepSpace: boolean|undefined,
130+
* maintainSpace: boolean|undefined,
131131
* overflowHidden: boolean|undefined,
132132
* dimensionsTransition: boolean|undefined,
133133
* widthTransition: boolean|undefined,
@@ -140,13 +140,13 @@ <h1 class="page-title">Source: js-css-animations.js</h1>
140140
'duration',
141141
'delay',
142142
'staggerDelay',
143-
'timingFunction',
143+
'easing',
144144
'blur',
145145
'angle',
146146
'iteration',
147147
'direction',
148148
'transfOrigin',
149-
'keepSpace',
149+
'maintainSpace',
150150
'overflowHidden',
151151
'dimensionsTransition',
152152
'widthTransition',
@@ -206,7 +206,7 @@ <h1 class="page-title">Source: js-css-animations.js</h1>
206206
[
207207
'start',
208208
'complete',
209-
'keepSpace',
209+
'maintainSpace',
210210
'overflowHidden',
211211
'staggerDelay',
212212
'widthTransition',

0 commit comments

Comments
 (0)