@rdlabo/ionic-theme-md3 1.0.1 → 1.0.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.
Files changed (4) hide show
  1. package/dist/transition/md.transition.d.ts.map +1 -1
  2. package/dist/transition/md.transition.js +13 -19
  3. package/package.json +1 -1
  4. package/src/transition/md.transition.ts +13 -18
package/dist/transition/md.transition.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"md.transition.d.ts","sourceRoot":"","sources":["../../src/transition/md.transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4DAA4D,CAAC;AAE5F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD,eAAO,MAAM,qBAAqB,GAAI,GAAG,WAAW,EAAE,MAAM,iBAAiB,KAAG,SAwE/E,CAAC"}
1
+ {"version":3,"file":"md.transition.d.ts","sourceRoot":"","sources":["../../src/transition/md.transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4DAA4D,CAAC;AAE5F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD,eAAO,MAAM,qBAAqB,GAAI,GAAG,WAAW,EAAE,MAAM,iBAAiB,KAAG,SAmE/E,CAAC"}
package/dist/transition/md.transition.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { createAnimation } from '@ionic/core';
2
2
  import { getIonPageElement } from './index';
3
3
  export const mdTransitionAnimation = (_, opts) => {
4
- const OFF_BOTTOM = 40;
4
+ const OFF_RIGHT = 40;
5
5
  const CENTER = 0;
6
6
  const backDirection = opts.direction === 'back';
7
7
  const enteringEl = opts.enteringEl;
@@ -11,13 +11,16 @@ export const mdTransitionAnimation = (_, opts) => {
11
11
  const rootTransition = createAnimation();
12
12
  rootTransition.addElement(ionPageElement).fill('both').beforeRemoveClass('ion-page-invisible');
13
13
  if (backDirection) {
14
- rootTransition.duration((opts.duration ?? 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
14
+ rootTransition
15
+ .duration((opts.duration ?? 0) || 200)
16
+ .easing('cubic-bezier(0.47,0,0.745,0.715)')
17
+ .fromTo('transform', `translateX(${OFF_RIGHT * -1}px)`, `translateX(${CENTER}px)`);
15
18
  }
16
19
  else {
17
20
  rootTransition
18
21
  .duration((opts.duration ?? 0) || 280)
19
22
  .easing('cubic-bezier(0.36,0.66,0.04,1)')
20
- .fromTo('transform', `translateX(${OFF_BOTTOM}px)`, `translateX(${CENTER}px)`)
23
+ .fromTo('transform', `translateX(${OFF_RIGHT}px)`, `translateX(${CENTER}px)`)
21
24
  .fromTo('opacity', 0.01, 1);
22
25
  }
23
26
  if (enteringToolbarEle) {
@@ -25,24 +28,15 @@ export const mdTransitionAnimation = (_, opts) => {
25
28
  enteringToolBar.addElement(enteringToolbarEle);
26
29
  rootTransition.addAnimation(enteringToolBar);
27
30
  }
28
- if (leavingEl) {
31
+ if (leavingEl && !backDirection) {
29
32
  const stackedTransition = createAnimation();
30
33
  const stackedElement = getIonPageElement(leavingEl);
31
34
  const stackedAnimationElement = stackedElement.querySelectorAll('ion-toolbar, ion-content > *');
32
- if (!backDirection) {
33
- stackedTransition.addElement(stackedAnimationElement);
34
- stackedTransition
35
- .duration((opts.duration ?? 0) || 280)
36
- .easing('cubic-bezier(0.36,0.66,0.04,1)')
37
- .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_BOTTOM * -1}px)`);
38
- }
39
- else if (backDirection) {
40
- stackedTransition.addElement(ionPageElement);
41
- stackedTransition
42
- .duration((opts.duration ?? 0) || 200)
43
- .easing('cubic-bezier(0.36,0.66,0.04,1)')
44
- .fromTo('transform', `translateX(${OFF_BOTTOM * -1}px)`, `translateX(${CENTER}px)`);
45
- }
35
+ stackedTransition.addElement(stackedAnimationElement);
36
+ stackedTransition
37
+ .duration((opts.duration ?? 0) || 280)
38
+ .easing('cubic-bezier(0.36,0.66,0.04,1)')
39
+ .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_RIGHT * -1}px)`);
46
40
  rootTransition.addAnimation(stackedTransition);
47
41
  }
48
42
  if (leavingEl && backDirection) {
@@ -55,7 +49,7 @@ export const mdTransitionAnimation = (_, opts) => {
55
49
  leavingPage.elements[0].style.setProperty('display', 'none');
56
50
  }
57
51
  })
58
- .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_BOTTOM}px)`)
52
+ .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_RIGHT}px)`)
59
53
  .fromTo('opacity', 1, 0);
60
54
  rootTransition.addAnimation(leavingPage);
61
55
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rdlabo/ionic-theme-md3",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Material Design 3 Theme for Ionic Framework",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
package/src/transition/md.transition.ts CHANGED
@@ -4,7 +4,7 @@ import type { TransitionOptions } from './index';
4
4
  import { getIonPageElement } from './index';
5
5
 
6
6
  export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): Animation => {
7
- const OFF_BOTTOM = 40;
7
+ const OFF_RIGHT = 40;
8
8
  const CENTER = 0;
9
9
 
10
10
  const backDirection = opts.direction === 'back';
@@ -19,12 +19,15 @@ export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions):
19
19
 
20
20
  // animate the component itself
21
21
  if (backDirection) {
22
- rootTransition.duration((opts.duration ?? 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
22
+ rootTransition
23
+ .duration((opts.duration ?? 0) || 200)
24
+ .easing('cubic-bezier(0.47,0,0.745,0.715)')
25
+ .fromTo('transform', `translateX(${OFF_RIGHT * -1}px)`, `translateX(${CENTER}px)`);
23
26
  } else {
24
27
  rootTransition
25
28
  .duration((opts.duration ?? 0) || 280)
26
29
  .easing('cubic-bezier(0.36,0.66,0.04,1)')
27
- .fromTo('transform', `translateX(${OFF_BOTTOM}px)`, `translateX(${CENTER}px)`)
30
+ .fromTo('transform', `translateX(${OFF_RIGHT}px)`, `translateX(${CENTER}px)`)
28
31
  .fromTo('opacity', 0.01, 1);
29
32
  }
30
33
 
@@ -35,23 +38,15 @@ export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions):
35
38
  rootTransition.addAnimation(enteringToolBar);
36
39
  }
37
40
 
38
- if (leavingEl) {
41
+ if (leavingEl && !backDirection) {
39
42
  const stackedTransition = createAnimation();
40
43
  const stackedElement = getIonPageElement(leavingEl);
41
44
  const stackedAnimationElement = stackedElement.querySelectorAll('ion-toolbar, ion-content > *');
42
- if (!backDirection) {
43
- stackedTransition.addElement(stackedAnimationElement);
44
- stackedTransition
45
- .duration((opts.duration ?? 0) || 280)
46
- .easing('cubic-bezier(0.36,0.66,0.04,1)')
47
- .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_BOTTOM * -1}px)`);
48
- } else if (backDirection) {
49
- stackedTransition.addElement(ionPageElement);
50
- stackedTransition
51
- .duration((opts.duration ?? 0) || 200)
52
- .easing('cubic-bezier(0.36,0.66,0.04,1)')
53
- .fromTo('transform', `translateX(${OFF_BOTTOM * -1}px)`, `translateX(${CENTER}px)`);
54
- }
45
+ stackedTransition.addElement(stackedAnimationElement);
46
+ stackedTransition
47
+ .duration((opts.duration ?? 0) || 280)
48
+ .easing('cubic-bezier(0.36,0.66,0.04,1)')
49
+ .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_RIGHT * -1}px)`);
55
50
  rootTransition.addAnimation(stackedTransition);
56
51
  }
57
52
 
@@ -68,7 +63,7 @@ export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions):
68
63
  leavingPage.elements[0].style.setProperty('display', 'none');
69
64
  }
70
65
  })
71
- .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_BOTTOM}px)`)
66
+ .fromTo('transform', `translateX(${CENTER}px)`, `translateX(${OFF_RIGHT}px)`)
72
67
  .fromTo('opacity', 1, 0);
73
68
 
74
69
  rootTransition.addAnimation(leavingPage);