javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +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');
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 gesture?: Gesture;
private rafId: any;
private tmrId: any;
private noAnimate = true;
@Element() el!: HTMLElement;
@ -64,10 +66,16 @@ export class PickerColumnCmp implements ComponentInterface {
onEnd: ev => this.onEnd(ev),
});
this.gesture.setDisabled(false);
this.tmrId = setTimeout(() => {
this.noAnimate = false;
this.refresh(true);
}, 250);
}
componentDidUnload() {
cancelAnimationFrame(this.rafId);
clearTimeout(this.tmrId);
}
private setSelected(selectedIndex: number, duration: number) {
@ -100,14 +108,11 @@ export class PickerColumnCmp implements ComponentInterface {
const button = children[i] as HTMLElement;
const opt = col.options[i];
const optOffset = (i * this.optHeight) + y;
let visible = true;
let transform = '';
if (rotateFactor !== 0) {
const rotateX = optOffset * rotateFactor;
if (Math.abs(rotateX) > 90) {
visible = false;
} else {
if (Math.abs(rotateX) <= 90) {
translateY = 0;
translateZ = 90;
transform = `rotateX(${rotateX}deg) `;
@ -115,25 +120,24 @@ export class PickerColumnCmp implements ComponentInterface {
} else {
translateZ = 0;
translateY = optOffset;
if (Math.abs(translateY) > 170) {
visible = false;
}
}
const selected = selectedIndex === i;
if (visible) {
transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
if (this.scaleFactor !== 1 && !selected) {
transform += scaleStr;
}
} else {
transform = 'translate3d(-9999px,0px,0px)';
transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
if (this.scaleFactor !== 1 && !selected) {
transform += scaleStr;
}
// Update transition duration
if (duration !== opt.duration) {
if (this.noAnimate) {
opt.duration = 0;
button.style.transitionDuration = '';
} else if (duration !== opt.duration) {
opt.duration = duration;
button.style.transitionDuration = durationStr;
}
// Update transform
if (transform !== opt.transform) {
opt.transform = transform;
@ -271,7 +275,7 @@ export class PickerColumnCmp implements ComponentInterface {
if (this.velocity === 0 && detail.deltaY === 0) {
const opt = (detail.event.target as Element).closest('.picker-opt');
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 {
@ -280,7 +284,7 @@ export class PickerColumnCmp implements ComponentInterface {
}
}
private refresh() {
private refresh(forceRefresh?: boolean) {
let min = this.col.options.length - 1;
let max = 0;
const options = this.col.options;
@ -292,10 +296,10 @@ export class PickerColumnCmp implements ComponentInterface {
}
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;
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 DECELERATION_FRICTION = 0.97;
const MAX_PICKER_SPEED = 90;
const TRANSITION_DURATION = 150;