javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ripple-effect): animation

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-05 14:28:43 +02:00
parent f3b8ddb69d
commit 25c852c2c8
14 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components.d.ts vendored
View File

@ -4583,7 +4583,7 @@ declare global {
declare global { declare global {
interface HTMLIonRippleEffectElement extends HTMLStencilElement { interface HTMLIonRippleEffectElement extends HTMLStencilElement {
'addRipple': (pageX: number, pageY: number) => void; 'addRipple': (pageX: number, pageY: number) => void;
'useTapClick': boolean; 'tapClick': boolean;
} }
var HTMLIonRippleEffectElement: { var HTMLIonRippleEffectElement: {
prototype: HTMLIonRippleEffectElement; prototype: HTMLIonRippleEffectElement;
@ -4602,7 +4602,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRippleEffectAttributes extends HTMLAttributes { export interface IonRippleEffectAttributes extends HTMLAttributes {
'useTapClick'?: boolean; 'tapClick'?: boolean;
} }
} }
} }

4
core/src/components/alert/alert.tsx
View File

@ -286,7 +286,7 @@ export class Alert implements OverlayInterface {
{i.label} {i.label}
</div> </div>
</div> </div>
{this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>} { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</button> </button>
))} ))}
</div> </div>
@ -306,7 +306,7 @@ export class Alert implements OverlayInterface {
{i.label} {i.label}
</div> </div>
</div> </div>
{this.mode === 'md' && <ion-ripple-effect useTapClick={true}/>} { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</button> </button>
))} ))}
</div> </div>

2
core/src/components/back-button/back-button.tsx
View File

@ -63,7 +63,7 @@ export class BackButton {
onClick={(ev) => this.onClick(ev)}> onClick={(ev) => this.onClick(ev)}>
{ backButtonIcon && <ion-icon name={backButtonIcon}/> } { backButtonIcon && <ion-icon name={backButtonIcon}/> }
{ this.mode === 'ios' && backButtonText && <span class='button-text'>{backButtonText}</span> } { 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> </button>
); );
} }

2
core/src/components/button/button.tsx
View File

@ -157,7 +157,7 @@ export class Button {
<slot></slot> <slot></slot>
<slot name='end'></slot> <slot name='end'></slot>
</span> </span>
{ this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</TagType> </TagType>
); );
} }

2
core/src/components/chip-button/chip-button.tsx
View File

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

2
core/src/components/datetime/datetime.tsx
View File

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

2
core/src/components/fab-button/fab-button.tsx
View File

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

2
core/src/components/item/item.tsx
View File

@ -133,7 +133,7 @@ export class Item {
</div> </div>
<slot name='end'></slot> <slot name='end'></slot>
</div> </div>
{ clickable && this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> } { clickable && this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</TagType> </TagType>
); );
} }

4
core/src/components/ripple-effect/readme.md
View File

@ -7,14 +7,14 @@
## Properties ## Properties
#### useTapClick #### tapClick
boolean boolean
## Attributes ## Attributes
#### use-tap-click #### tap-click
boolean boolean

2
core/src/components/ripple-effect/ripple-effect.scss
View File

@ -34,7 +34,7 @@ ion-ripple-effect {
@keyframes rippleAnimation { @keyframes rippleAnimation {
0% { 0% {
opacity: .2; opacity: .2;
transform: scale(.05); transform: scale(.1);
} }
100% { 100% {

22
core/src/components/ripple-effect/ripple-effect.tsx
View File

@ -14,12 +14,12 @@ export class RippleEffect {
@Prop({context: 'dom'}) dom: DomController; @Prop({context: 'dom'}) dom: DomController;
@Prop({context: 'enableListener'}) enableListener: EventListenerEnable; @Prop({context: 'enableListener'}) enableListener: EventListenerEnable;
@Prop() useTapClick = false; @Prop() tapClick = false;
@Watch('useTapClick') @Watch('tapClick')
tapClickChanged(useTapClick: boolean) { tapClickChanged(tapClick: boolean) {
this.enableListener(this, 'parent:ionActivated', useTapClick); this.enableListener(this, 'parent:ionActivated', tapClick);
this.enableListener(this, 'touchstart', !useTapClick); this.enableListener(this, 'touchstart', !tapClick);
this.enableListener(this, 'mousedown', !useTapClick); this.enableListener(this, 'mousedown', !tapClick);
} }
@Listen('parent:ionActivated', {enabled: false}) @Listen('parent:ionActivated', {enabled: false})
@ -43,7 +43,7 @@ export class RippleEffect {
} }
componentDidLoad() { componentDidLoad() {
this.tapClickChanged(this.useTapClick); this.tapClickChanged(this.tapClick);
} }
@Method() @Method()
@ -54,7 +54,7 @@ export class RippleEffect {
const rect = this.el.getBoundingClientRect(); const rect = this.el.getBoundingClientRect();
const width = rect.width; const width = rect.width;
const height = rect.height; 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); x = pageX - rect.left - (size / 2);
y = pageY - rect.top - (size / 2); y = pageY - rect.top - (size / 2);
}); });
@ -62,7 +62,7 @@ export class RippleEffect {
const div = document.createElement('div'); const div = document.createElement('div');
div.classList.add('ripple-effect'); div.classList.add('ripple-effect');
const style = div.style; 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.top = y + 'px';
style.left = x + 'px'; style.left = x + 'px';
style.width = size + '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;

2
core/src/components/segment-button/segment-button.tsx
View File

@ -98,7 +98,7 @@ export class SegmentButton {
href={this.href} href={this.href}
onClick={this.segmentButtonClick.bind(this)}> onClick={this.segmentButtonClick.bind(this)}>
<slot></slot> <slot></slot>
{ this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</TagType> </TagType>
]; ];
} }

2
core/src/components/select/select.tsx
View File

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

2
core/src/components/tab-button/tab-button.tsx
View File

@ -87,7 +87,7 @@ export class TabButton {
{ tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> } { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
{ tab.label && <span class='tab-button-text'>{tab.label}</span> } { tab.label && <span class='tab-button-text'>{tab.label}</span> }
{ tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> } { 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> </a>
]; ];
} }