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 {
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;
}
}
}

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

@ -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>

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

@ -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>
);
}

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

@ -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>
);
}

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

@ -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>
);
}

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

@ -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>
];
}

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

@ -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>
);
}

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

@ -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>
);
}

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

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

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

@ -34,7 +34,7 @@ ion-ripple-effect {
@keyframes rippleAnimation {
0% {
opacity: .2;
transform: scale(.05);
transform: scale(.1);
}
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: '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,7 +54,7 @@ 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);
});
@ -62,7 +62,7 @@ export class RippleEffect {
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;

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

@ -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>
];
}

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

@ -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}/>
];

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.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>
];
}