fix(ripple-effect): animation

ionic-team · Apr 5, 2018 · 25c852c · 25c852c
1 parent f3b8ddb
commit 25c852c
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 25 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -4583,7 +4583,7 @@ declare global {
 declare global {
   interface HTMLIonRippleEffectElement extends HTMLStencilElement {
     'addRipple': (pageX: number, pageY: number) => void;
-    'useTapClick': boolean;
+    'tapClick': boolean;
   }
   var HTMLIonRippleEffectElement: {
     prototype: HTMLIonRippleEffectElement;
@@ -4602,7 +4602,7 @@ declare global {
   }
   namespace JSXElements {
     export interface IonRippleEffectAttributes extends HTMLAttributes {
-      'useTapClick'?: boolean;
+      'tapClick'?: boolean;
     }
   }
 }

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
@@ -286,7 +286,7 @@ export class Alert implements OverlayInterface {
                 {i.label}
               </div>
             </div>
-            {this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>}
+            { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
           </button>
         ))}
       </div>
@@ -306,7 +306,7 @@ export class Alert implements OverlayInterface {
                 {i.label}
               </div>
             </div>
-            {this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>}
+            { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
           </button>
         ))}
       </div>

diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
@@ -63,7 +63,7 @@ export class BackButton {
         onClick={(ev) => this.onClick(ev)}>
         { backButtonIcon && <ion-icon name={backButtonIcon}/> }
         { this.mode === 'ios' && backButtonText && <span class='button-text'>{backButtonText}</span> }
-        { this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
+        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </button>
     );
   }

diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
@@ -157,7 +157,7 @@ export class Button {
             <slot></slot>
             <slot name='end'></slot>
           </span>
-          { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
+          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </TagType>
     );
   }

diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx
@@ -68,7 +68,7 @@ export class ChipButton {
           <span class='chip-button-inner'>
             <slot></slot>
           </span>
-          { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
+          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </TagType>
     );
   }

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -628,7 +628,7 @@ export class Datetime {
         aria-disabled={this.disabled ? 'true' : false}
         onClick={this.open.bind(this)}
         class='datetime-cover'>
-        {this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>}
+        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </button>
     ];
   }

diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
@@ -110,7 +110,7 @@ export class FabButton {
         <span class='fab-button-inner'>
           <slot></slot>
         </span>
-        { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
+        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </TagType>
     );
   }

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
@@ -133,7 +133,7 @@ export class Item {
           </div>
           <slot name='end'></slot>
         </div>
-        { clickable && this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
+        { clickable && this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </TagType>
     );
   }

diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
@@ -7,14 +7,14 @@
 
 ## Properties
 
-#### useTapClick
+#### tapClick
 
 boolean
 
 
 ## Attributes
 
-#### use-tap-click
+#### tap-click
 
 boolean
 

diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss
@@ -34,7 +34,7 @@ ion-ripple-effect {
 @keyframes rippleAnimation {
   0% {
     opacity: .2;
-    transform: scale(.05);
+    transform: scale(.1);
   }
 
   100% {

diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx
@@ -14,12 +14,12 @@ export class RippleEffect {
   @Prop({context: 'dom'}) dom: DomController;
   @Prop({context: 'enableListener'}) enableListener: EventListenerEnable;
 
-  @Prop() useTapClick = false;
-  @Watch('useTapClick')
-  tapClickChanged(useTapClick: boolean) {
-    this.enableListener(this, 'parent:ionActivated', useTapClick);
-    this.enableListener(this, 'touchstart', !useTapClick);
-    this.enableListener(this, 'mousedown', !useTapClick);
+  @Prop() tapClick = false;
+  @Watch('tapClick')
+  tapClickChanged(tapClick: boolean) {
+    this.enableListener(this, 'parent:ionActivated', tapClick);
+    this.enableListener(this, 'touchstart', !tapClick);
+    this.enableListener(this, 'mousedown', !tapClick);
   }
 
   @Listen('parent:ionActivated', {enabled: false})
@@ -43,7 +43,7 @@ export class RippleEffect {
   }
 
   componentDidLoad() {
-    this.tapClickChanged(this.useTapClick);
+    this.tapClickChanged(this.tapClick);
   }
 
   @Method()
@@ -54,15 +54,15 @@ export class RippleEffect {
       const rect = this.el.getBoundingClientRect();
       const width = rect.width;
       const height = rect.height;
-      size = Math.min(Math.sqrt(width * width + height * height) * 2, 600);
+      size = Math.min(Math.sqrt(width * width + height * height) * 2, MAX_RIPPLE_DIAMETER);
       x = pageX - rect.left - (size / 2);
       y = pageY - rect.top - (size / 2);
     });
     this.dom.write(() => {
       const div = document.createElement('div');
       div.classList.add('ripple-effect');
       const style = div.style;
-      const duration = Math.max(800 * Math.sqrt(size / 350) + 0.5, 260);
+      const duration = Math.max(RIPPLE_FACTOR * Math.sqrt(size), MIN_RIPPLE_DURATION);
       style.top = y + 'px';
       style.left = x + 'px';
       style.width = size + 'px';
@@ -74,3 +74,7 @@ export class RippleEffect {
     });
   }
 }
+
+const RIPPLE_FACTOR = 35;
+const MIN_RIPPLE_DURATION = 260;
+const MAX_RIPPLE_DIAMETER = 550;
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
@@ -98,7 +98,7 @@ export class SegmentButton {
         href={this.href}
         onClick={this.segmentButtonClick.bind(this)}>
           <slot></slot>
-          { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
+          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </TagType>
     ];
   }

diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
@@ -509,7 +509,7 @@ export class Select {
         onBlur={this.onBlur.bind(this)}
         class='select-cover'>
         <slot></slot>
-        {this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>}
+        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </button>,
       <input type='hidden' name={this.name} value={this.value}/>
     ];

diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
@@ -87,7 +87,7 @@ export class TabButton {
         { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
         { tab.label && <span class='tab-button-text'>{tab.label}</span> }
         { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
-        { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
+        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </a>
     ];
   }