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

fix(item-sliding): improve rending w/out flickers

Browse Source
This commit is contained in:
Adam Bradley
2015-11-13 22:12:02 -06:00
parent 4431aeec0b
commit 4bbee6e89f
3 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/item/item-sliding-gesture.ts
View File

@ -68,6 +68,9 @@ export class ItemSlidingGesture extends DragGesture {
if (!itemData.optsWidth) return; if (!itemData.optsWidth) return;
} }
itemContainerEle.classList.add('active-slide');
itemContainerEle.classList.add('active-options');
let x = ev.center[this.direction]; let x = ev.center[this.direction];
let delta = x - itemData.startX; let delta = x - itemData.startX;
@ -143,14 +146,15 @@ export class ItemSlidingGesture extends DragGesture {
let timerId = setTimeout(() => { let timerId = setTimeout(() => {
if (slidingEle.style[CSS.transform] === '') { if (slidingEle.style[CSS.transform] === '') {
itemContainerEle.classList.remove('active-slide'); itemContainerEle.classList.remove('active-slide');
itemContainerEle.classList.remove('active-options');
this.openItems--; this.openItems--;
} }
}, 400); }, 400);
this.set(itemContainerEle, 'timerId', timerId); this.set(itemContainerEle, 'timerId', timerId);
} }
slidingEle.style[CSS.transform] = (openAmount === 0 ? '' : 'translate3d(' + -openAmount + 'px,0,0)');
slidingEle.style[CSS.transition] = (animate ? '' : 'none'); slidingEle.style[CSS.transition] = (animate ? '' : 'none');
slidingEle.style[CSS.transform] = (openAmount === 0 ? '' : 'translate3d(' + -openAmount + 'px,0,0)');
} }
getOpenAmount(itemContainerEle) { getOpenAmount(itemContainerEle) {

6
ionic/components/item/item-sliding.scss
View File

@ -21,6 +21,7 @@ ion-item-options {
right: 0; right: 0;
z-index: $z-index-item-options; z-index: $z-index-item-options;
height: 100%; height: 100%;
opacity: 0;
} }
ion-item-sliding.active-slide { ion-item-sliding.active-slide {
@ -28,9 +29,14 @@ ion-item-sliding.active-slide {
.item { .item {
position: relative; position: relative;
z-index: $z-index-item-options + 1; z-index: $z-index-item-options + 1;
transition: all 200ms;
} }
ion-item-options { ion-item-options {
display: flex; display: flex;
} }
&.active-options ion-item-options{
opacity: 1;
}
} }

10
tsconfig.json
View File

@ -3,13 +3,9 @@
"compilerOptions": { "compilerOptions": {
"emitDecoratorMetadata": true, "emitDecoratorMetadata": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"target": "es5", "target": "es6",
"module": "commonjs", "module": "system",
"declaration": false, "declaration": true
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"outDir": "dist/js/cjs"
}, },
"fileGlobs": [ "fileGlobs": [
"./ionic/**/*.ts", "./ionic/**/*.ts",