Skip to content

Commit 7f3f91c

Browse files
igorMSoaresigorMSoares
committed
refactor: dynamic import 'transitions' in updateCssProperties()
1 parent cc0f587 commit 7f3f91c

File tree

3 files changed

+123
-119
lines changed

3 files changed

+123
-119
lines changed

‎js-css-animations/animate.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ import {
1111

1212
// import { initParentResize, endParentResize } from './resize-parent.js';
1313

14-
import {
15-
removeInlineTransition,
16-
// appendTransition,
17-
// getCurrentTransition,
18-
} from './transitions.js';
14+
// import {
15+
// // removeInlineTransition,
16+
// // appendTransition,
17+
// // getCurrentTransition,
18+
// } from './transitions.js';
1919

2020
// import { setParentMaxMeasures } from './measurements.js';
2121

@@ -204,9 +204,12 @@ export const setCssProperty = (element, property, value) => {
204204
* @param {HTMLElement} element - The DOM element to update the CSS Properties
205205
* @param {Object.<string, string>} opts - Object containing a custom property key and a CSS value to be updated
206206
*/
207-
const updateCssProperties = (element, opts) => {
207+
const updateCssProperties = async (element, opts) => {
208208
removeCustomCssProperties(element);
209-
if (element !== document.documentElement) removeInlineTransition(element);
209+
if (element !== document.documentElement) {
210+
const { removeInlineTransition } = await import('./transitions.js');
211+
removeInlineTransition(element);
212+
}
210213
CUSTOM_CSS_PROPERTIES.forEach(prop => {
211214
if (typeof opts[prop] === 'string' || typeof opts[prop] === 'number') {
212215
if (typeof opts[prop] === 'number') {
@@ -636,7 +639,7 @@ const getAction = (element, animType) => {
636639
* @param {HTMLElement} el - The DOM element being animated
637640
* @param {Object} args - The animation's ID and type and all the options passed by the user
638641
*/
639-
const preset = (el, args) => {
642+
const preset = async (el, args) => {
640643
const { opts, animationId } = args;
641644
const { animType } = opts;
642645
if (
@@ -647,7 +650,7 @@ const preset = (el, args) => {
647650
)
648651
opts.angle = undefined;
649652

650-
updateCssProperties(el, opts);
653+
await updateCssProperties(el, opts);
651654

652655
if (opts.staggerDelay) {
653656
const staggeredDelay =

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ const getTargets = selector => {
6969
* @see {@link module:globals.PROPERTY_NAMES}
7070
* @see {@link module:animate~configurations}
7171
*/
72-
const config = opts => {
72+
const config = async opts => {
7373
updateDefaultConfig(opts);
74-
updateCssProperties(document.documentElement, opts);
74+
await updateCssProperties(document.documentElement, opts);
7575
if (opts.cursor)
7676
setCssProperty(document.documentElement, 'cursor', opts.cursor);
7777
};
@@ -190,10 +190,10 @@ const animationFunctions = (function () {
190190
'dimensionsTransition',
191191
].forEach(opt => (args[opt] = opts[opt]));
192192

193-
getTargets(target).forEach((element, i) => {
193+
getTargets(target).forEach(async (element, i) => {
194194
opts.animType = animType;
195195
opts.queryIndex = i;
196-
preset(element, {
196+
await preset(element, {
197197
opts,
198198
animationId: id,
199199
});

‎main.js‎

Lines changed: 107 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -4,124 +4,125 @@ jsCssAnimations.init.slideUp({
44
trigger: '.btn--slide-up',
55
staggerDelay: 500,
66
duration: '1s',
7+
dimensionsTransition: false,
78
start: () => {
89
jsCssAnimations.toggle('#anchor img', 'rotateDownCCW', 'rotateUp');
910
},
1011
});
1112

12-
jsCssAnimations.init.slideRight({
13-
trigger: '.btn--slide-right',
14-
start: () => {
15-
jsCssAnimations.toggle('#anchor2 img', 'rotateRight', 'rotateUp');
16-
},
17-
});
13+
// jsCssAnimations.init.slideRight({
14+
// trigger: '.btn--slide-right',
15+
// start: () => {
16+
// jsCssAnimations.toggle('#anchor2 img', 'rotateRight', 'rotateUp');
17+
// },
18+
// });
1819

19-
jsCssAnimations.init.slideDown({
20-
trigger: '.btn--slide-down',
21-
delay: '1.5s',
22-
start: () => {
23-
jsCssAnimations.toggle('img', 'rotateDownCCW', 'rotateUp', {
24-
delay: '1.5s',
25-
});
26-
// @ts-ignore
27-
document.querySelector('.delay-counter').innerText = '1.5 seconds Delay';
28-
jsCssAnimations.show.collapse('.delay-counter', {
29-
keepSpace: true,
30-
});
31-
},
32-
complete: () => {
33-
jsCssAnimations.hide.fade('.delay-counter', {
34-
keepSpace: true,
35-
complete: () => {
36-
// @ts-ignore
37-
document.querySelector('.delay-counter').innerText = '';
38-
},
39-
});
40-
},
41-
});
20+
// jsCssAnimations.init.slideDown({
21+
// trigger: '.btn--slide-down',
22+
// delay: '1.5s',
23+
// start: () => {
24+
// jsCssAnimations.toggle('img', 'rotateDownCCW', 'rotateUp', {
25+
// delay: '1.5s',
26+
// });
27+
// // @ts-ignore
28+
// document.querySelector('.delay-counter').innerText = '1.5 seconds Delay';
29+
// jsCssAnimations.show.collapse('.delay-counter', {
30+
// keepSpace: true,
31+
// });
32+
// },
33+
// complete: () => {
34+
// jsCssAnimations.hide.fade('.delay-counter', {
35+
// keepSpace: true,
36+
// complete: () => {
37+
// // @ts-ignore
38+
// document.querySelector('.delay-counter').innerText = '';
39+
// },
40+
// });
41+
// },
42+
// });
4243

43-
jsCssAnimations.init.slideLeft({
44-
trigger: '.btn--slide-left',
45-
staggerDelay: 500,
46-
start: () => {
47-
jsCssAnimations.toggle('img', 'slideLeft', 'slideLeft', {
48-
staggerDelay: 400,
49-
overflowHidden: false,
50-
keepSpace: true,
51-
});
52-
},
53-
});
44+
// jsCssAnimations.init.slideLeft({
45+
// trigger: '.btn--slide-left',
46+
// staggerDelay: 500,
47+
// start: () => {
48+
// jsCssAnimations.toggle('img', 'slideLeft', 'slideLeft', {
49+
// staggerDelay: 400,
50+
// overflowHidden: false,
51+
// keepSpace: true,
52+
// });
53+
// },
54+
// });
5455

55-
jsCssAnimations.init.collapse({
56-
trigger: '.collapse-expand--btn',
57-
targetSelector: '.collapse-expand--p',
58-
});
56+
// jsCssAnimations.init.collapse({
57+
// trigger: '.collapse-expand--btn',
58+
// targetSelector: '.collapse-expand--p',
59+
// });
5960

60-
jsCssAnimations.init.collapse({
61-
trigger: '.collapse-expand--btn__mult',
62-
targetSelector: '.collapse-expand--p__mult',
63-
staggerDelay: 400,
64-
keepSpace: true,
65-
transfOrigin: 'center',
66-
});
61+
// jsCssAnimations.init.collapse({
62+
// trigger: '.collapse-expand--btn__mult',
63+
// targetSelector: '.collapse-expand--p__mult',
64+
// staggerDelay: 400,
65+
// keepSpace: true,
66+
// transfOrigin: 'center',
67+
// });
6768

68-
jsCssAnimations.init.fade({
69-
trigger: '.fade--btn',
70-
blur: 12,
71-
keepSpace: true,
72-
});
69+
// jsCssAnimations.init.fade({
70+
// trigger: '.fade--btn',
71+
// blur: 12,
72+
// keepSpace: true,
73+
// });
7374

74-
const validateInput = input => {
75-
if (input.validity.patternMismatch) {
76-
const msgArea = document.querySelector('.rotation--input-error');
77-
// @ts-ignore
78-
msgArea.innerText = 'Type in a number (e.g.: 270, -22.5)';
79-
jsCssAnimations.show.fade(msgArea, {
80-
complete: () => {
81-
setTimeout(() => {
82-
jsCssAnimations.hide.fade(msgArea, { delay: '2.5s' });
83-
}, 0);
84-
},
85-
});
86-
input.value = '';
87-
return false;
88-
} else {
89-
return true;
90-
}
91-
};
75+
// const validateInput = input => {
76+
// if (input.validity.patternMismatch) {
77+
// const msgArea = document.querySelector('.rotation--input-error');
78+
// // @ts-ignore
79+
// msgArea.innerText = 'Type in a number (e.g.: 270, -22.5)';
80+
// jsCssAnimations.show.fade(msgArea, {
81+
// complete: () => {
82+
// setTimeout(() => {
83+
// jsCssAnimations.hide.fade(msgArea, { delay: '2.5s' });
84+
// }, 0);
85+
// },
86+
// });
87+
// input.value = '';
88+
// return false;
89+
// } else {
90+
// return true;
91+
// }
92+
// };
9293

93-
jsCssAnimations.init.rotate({
94-
trigger: '#rotation-angle',
95-
targetSelector: '.rotation-area',
96-
on: 'change',
97-
// @ts-ignore
98-
start: () => {
99-
if (validateInput(document.querySelector('#rotation-angle'))) {
100-
// @ts-ignore
101-
const angle = Number(document.getElementById('rotation-angle')?.value);
102-
jsCssAnimations.rotate('.rotation-area', {
103-
angle: angle,
104-
});
105-
}
106-
},
107-
complete: () => {
108-
jsCssAnimations.rotate('.rotation-area', {
109-
angle: '0deg',
110-
delay: '1s',
111-
});
112-
},
113-
});
94+
// jsCssAnimations.init.rotate({
95+
// trigger: '#rotation-angle',
96+
// targetSelector: '.rotation-area',
97+
// on: 'change',
98+
// // @ts-ignore
99+
// start: () => {
100+
// if (validateInput(document.querySelector('#rotation-angle'))) {
101+
// // @ts-ignore
102+
// const angle = Number(document.getElementById('rotation-angle')?.value);
103+
// jsCssAnimations.rotate('.rotation-area', {
104+
// angle: angle,
105+
// });
106+
// }
107+
// },
108+
// complete: () => {
109+
// jsCssAnimations.rotate('.rotation-area', {
110+
// angle: '0deg',
111+
// delay: '1s',
112+
// });
113+
// },
114+
// });
114115

115-
jsCssAnimations.pulsate('#anchor2 img', {
116-
finalScale: 1.2,
117-
});
116+
// jsCssAnimations.pulsate('#anchor2 img', {
117+
// finalScale: 1.2,
118+
// });
118119

119-
jsCssAnimations.init.scale({
120-
targetSelector: '.p2',
121-
finalScale: 1.2,
122-
duration: '1.5s',
123-
});
120+
// jsCssAnimations.init.scale({
121+
// targetSelector: '.p2',
122+
// finalScale: 1.2,
123+
// duration: '1.5s',
124+
// });
124125

125-
document.querySelector('#anchor img')?.addEventListener('click', () => {
126-
jsCssAnimations.end('.btn--slide-up');
127-
});
126+
// document.querySelector('#anchor img')?.addEventListener('click', () => {
127+
// jsCssAnimations.end('.btn--slide-up');
128+
// });

0 commit comments

Comments
 (0)