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(picker): delay option animate until after options initialized (#16037)

Browse Source
This commit is contained in:
Adam Bradley
2018-10-22 20:31:27 -05:00
committed by GitHub
parent e644fc9246
commit a74e5653d5
2 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/datetime/test/standalone/e2e.ts
View File

@ -16,4 +16,11 @@ it('datetime: standalone', async () => {
compare = await page.compareScreenshot('should open basic picker'); compare = await page.compareScreenshot('should open basic picker');
expect(compare).toMatchScreenshot(); expect(compare).toMatchScreenshot();
const octoberOpt = await page.find({ text: 'October' });
await octoberOpt.click();
await page.waitFor(500);
compare = await page.compareScreenshot('should click "October" option');
expect(compare).toMatchScreenshot();
}); });

43
core/src/components/picker-column/picker-column.tsx
View File

@ -23,6 +23,8 @@ export class PickerColumnCmp implements ComponentInterface {
private optsEl?: HTMLElement; private optsEl?: HTMLElement;
private gesture?: Gesture; private gesture?: Gesture;
private rafId: any; private rafId: any;
private tmrId: any;
private noAnimate = true;
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
@ -64,10 +66,16 @@ export class PickerColumnCmp implements ComponentInterface {
onEnd: ev => this.onEnd(ev), onEnd: ev => this.onEnd(ev),
}); });
this.gesture.setDisabled(false); this.gesture.setDisabled(false);
this.tmrId = setTimeout(() => {
this.noAnimate = false;
this.refresh(true);
}, 250);
} }
componentDidUnload() { componentDidUnload() {
cancelAnimationFrame(this.rafId); cancelAnimationFrame(this.rafId);
clearTimeout(this.tmrId);
} }
private setSelected(selectedIndex: number, duration: number) { private setSelected(selectedIndex: number, duration: number) {
@ -100,14 +108,11 @@ export class PickerColumnCmp implements ComponentInterface {
const button = children[i] as HTMLElement; const button = children[i] as HTMLElement;
const opt = col.options[i]; const opt = col.options[i];
const optOffset = (i * this.optHeight) + y; const optOffset = (i * this.optHeight) + y;
let visible = true;
let transform = ''; let transform = '';
if (rotateFactor !== 0) { if (rotateFactor !== 0) {
const rotateX = optOffset * rotateFactor; const rotateX = optOffset * rotateFactor;
if (Math.abs(rotateX) > 90) { if (Math.abs(rotateX) <= 90) {
visible = false;
} else {
translateY = 0; translateY = 0;
translateZ = 90; translateZ = 90;
transform = `rotateX(${rotateX}deg) `; transform = `rotateX(${rotateX}deg) `;
@ -115,25 +120,24 @@ export class PickerColumnCmp implements ComponentInterface {
} else { } else {
translateZ = 0; translateZ = 0;
translateY = optOffset; translateY = optOffset;
if (Math.abs(translateY) > 170) {
visible = false;
}
} }
const selected = selectedIndex === i; const selected = selectedIndex === i;
if (visible) { transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
transform += `translate3d(0px,${translateY}px,${translateZ}px) `; if (this.scaleFactor !== 1 && !selected) {
if (this.scaleFactor !== 1 && !selected) { transform += scaleStr;
transform += scaleStr;
}
} else {
transform = 'translate3d(-9999px,0px,0px)';
} }
// Update transition duration // Update transition duration
if (duration !== opt.duration) { if (this.noAnimate) {
opt.duration = 0;
button.style.transitionDuration = '';
} else if (duration !== opt.duration) {
opt.duration = duration; opt.duration = duration;
button.style.transitionDuration = durationStr; button.style.transitionDuration = durationStr;
} }
// Update transform // Update transform
if (transform !== opt.transform) { if (transform !== opt.transform) {
opt.transform = transform; opt.transform = transform;
@ -271,7 +275,7 @@ export class PickerColumnCmp implements ComponentInterface {
if (this.velocity === 0 && detail.deltaY === 0) { if (this.velocity === 0 && detail.deltaY === 0) {
const opt = (detail.event.target as Element).closest('.picker-opt'); const opt = (detail.event.target as Element).closest('.picker-opt');
if (opt && opt.hasAttribute('opt-index')) { if (opt && opt.hasAttribute('opt-index')) {
this.setSelected(parseInt(opt.getAttribute('opt-index')!, 10), 150); this.setSelected(parseInt(opt.getAttribute('opt-index')!, 10), TRANSITION_DURATION);
} }
} else { } else {
@ -280,7 +284,7 @@ export class PickerColumnCmp implements ComponentInterface {
} }
} }
private refresh() { private refresh(forceRefresh?: boolean) {
let min = this.col.options.length - 1; let min = this.col.options.length - 1;
let max = 0; let max = 0;
const options = this.col.options; const options = this.col.options;
@ -292,10 +296,10 @@ export class PickerColumnCmp implements ComponentInterface {
} }
const selectedIndex = clamp(min, this.col.selectedIndex || 0, max); const selectedIndex = clamp(min, this.col.selectedIndex || 0, max);
if (this.col.prevSelected !== selectedIndex) { if (this.col.prevSelected !== selectedIndex || forceRefresh) {
const y = (selectedIndex * this.optHeight) * -1; const y = (selectedIndex * this.optHeight) * -1;
this.velocity = 0; this.velocity = 0;
this.update(y, 150, true); this.update(y, TRANSITION_DURATION, true);
} }
} }
@ -348,3 +352,4 @@ export class PickerColumnCmp implements ComponentInterface {
const PICKER_OPT_SELECTED = 'picker-opt-selected'; const PICKER_OPT_SELECTED = 'picker-opt-selected';
const DECELERATION_FRICTION = 0.97; const DECELERATION_FRICTION = 0.97;
const MAX_PICKER_SPEED = 90; const MAX_PICKER_SPEED = 90;
const TRANSITION_DURATION = 150;