{"action":"created","issue":{"url":"https://api.github.com/repos/ionic-team/ionic/issues/13413","repository_url":"https://api.github.com/repos/ionic-team/ionic","labels_url":"https://api.github.com/repos/ionic-team/ionic/issues/13413/labels{/name}","comments_url":"https://api.github.com/repos/ionic-team/ionic/issues/13413/comments","events_url":"https://api.github.com/repos/ionic-team/ionic/issues/13413/events","html_url":"https://github.com/ionic-team/ionic/issues/13413","id":273743931,"number":13413,"title":"Unable to animate full swipe on ion-item-sliding","user":{"login":"sburnicki","id":5701519,"avatar_url":"https://avatars1.githubusercontent.com/u/5701519?v=4","gravatar_id":"","url":"https://api.github.com/users/sburnicki","html_url":"https://github.com/sburnicki","followers_url":"https://api.github.com/users/sburnicki/followers","following_url":"https://api.github.com/users/sburnicki/following{/other_user}","gists_url":"https://api.github.com/users/sburnicki/gists{/gist_id}","starred_url":"https://api.github.com/users/sburnicki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sburnicki/subscriptions","organizations_url":"https://api.github.com/users/sburnicki/orgs","repos_url":"https://api.github.com/users/sburnicki/repos","events_url":"https://api.github.com/users/sburnicki/events{/privacy}","received_events_url":"https://api.github.com/users/sburnicki/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/ionic-team/ionic/milestones/56","html_url":"https://github.com/ionic-team/ionic/milestone/56","labels_url":"https://api.github.com/repos/ionic-team/ionic/milestones/56/labels","id":2716401,"number":56,"title":"4.x","description":"Future Major Release","creator":{"login":"kensodemann","id":1526846,"avatar_url":"https://avatars3.githubusercontent.com/u/1526846?v=4","gravatar_id":"","url":"https://api.github.com/users/kensodemann","html_url":"https://github.com/kensodemann","followers_url":"https://api.github.com/users/kensodemann/followers","following_url":"https://api.github.com/users/kensodemann/following{/other_user}","gists_url":"https://api.github.com/users/kensodemann/gists{/gist_id}","starred_url":"https://api.github.com/users/kensodemann/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kensodemann/subscriptions","organizations_url":"https://api.github.com/users/kensodemann/orgs","repos_url":"https://api.github.com/users/kensodemann/repos","events_url":"https://api.github.com/users/kensodemann/events{/privacy}","received_events_url":"https://api.github.com/users/kensodemann/received_events","type":"User","site_admin":false},"open_issues":40,"closed_issues":7,"state":"open","created_at":"2017-08-22T16:46:23Z","updated_at":"2017-11-27T23:25:29Z","due_on":null,"closed_at":null},"comments":0,"created_at":"2017-11-14T10:40:35Z","updated_at":"2017-11-30T06:17:00Z","closed_at":null,"author_association":"NONE","body":"<!-- Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/) -->\r\n\r\n<!-- Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Pro services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Pro support portal (http://support.ionicjs.com) -->\r\n\r\n**Ionic version:**  (check one with \"x\")\r\n(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)\r\n[ ] **2.x**\r\n[X] **3.x**\r\n[ ] **4.x**\r\n\r\n**I'm submitting a ...**  (check one with \"x\")\r\n[X] bug report\r\n[ ] feature request\r\n\r\n**Current behavior:**\r\nWhen I try to animate gestures like \"swipe to remove\" on list items, I want the item itself to slide out, which is quite common for this gesture.\r\n\r\nTo do this I use an `ion-item-sliding` with a `ion-item-options` that has an `expandable` button.\r\nUntil I recently updated my ionic version, I could animate this via  `moveSliding` (see below). Now I can't animate this behavior and the slide always closes:\r\n\r\n![swipe_to_remove_no_animation](https://user-images.githubusercontent.com/5701519/32770305-74558c1e-c91f-11e7-9ac0-b1a75480d096.gif)\r\n*Behavior with current ionic version*\r\n\r\n**Expected behavior:**\r\nI want to call `moveSliding` in the swipe event handler, so to have a common \"swipe to remove animation\":\r\n\r\n![swipe_to_delete](https://user-images.githubusercontent.com/5701519/32770395-c0d55e84-c91f-11e7-98c5-7496ca1b5d64.gif)\r\n*Behavior before upgrading*\r\n\r\n**Steps to reproduce:**\r\n1. Call `moveSliding` in the swipe event handler\r\n2. See that it doesn't have an effect anymore.\r\n\r\n**Related code:**\r\n[Minimal working example](https://github.com/sburnicki/ionic-swipe-to-remove)\r\n\r\nCode called on `(ionSwipe)`\r\n```typescript\r\n  deleteItem(item: ItemSliding) {\r\n    const nativeElement = <HTMLElement> item.item.getNativeElement();\r\n    const moveFactor = item.getOpenAmount() > 0 ? -1 : 2.5;\r\n    const x = nativeElement.offsetWidth * moveFactor;\r\n    item.setElementClass(\"removed\", true);\r\n    item.moveSliding(x);\r\n  }\r\n```\r\n\r\n**Other information:**\r\nI report this as a bug as it did work before.\r\nI suspect the following commit to be the reason why it doesn't work anymore:\r\nhttps://github.com/ionic-team/ionic/pull/12157/commits/92c082a218fbb2da1a3084e7c99711bc46f031b3\r\n\r\nBefore, the code called `_setOpenAmount` first, so I could overwrite it in my handler by calling `moveSliding`. Now it's called after the handler, so it overwrites what I'm doing.\r\n\r\nA *workaround* is to call `moveSliding` in `setTimeout`. However, this workaround easily breaks if other things are going on (like showing toast, multiple swipes, ...).\r\n\r\nAs this animation is really common for users, I'd really want to see it working again.\r\n\r\n**Ionic info:** (run `ionic info` from a terminal/cmd prompt and paste output below):\r\n\r\n```\r\ncli packages: (/usr/local/lib/node_modules)\r\n\r\n    @ionic/cli-utils  : 1.18.0\r\n    ionic (Ionic CLI) : 3.18.0\r\n\r\nglobal packages:\r\n\r\n    cordova (Cordova CLI) : 7.0.0 \r\n\r\nlocal packages:\r\n\r\n    @ionic/app-scripts : 3.0.0\r\n    Cordova Platforms  : android 6.3.0 ios 4.5.1\r\n    Ionic Framework    : ionic-angular 3.7.1\r\n\r\nSystem:\r\n\r\n    Node : v6.11.5\r\n    npm  : 4.1.2 \r\n    OS   : Linux 4.9\r\n\r\nEnvironment Variables:\r\n\r\n    ANDROID_HOME : not set\r\n\r\nMisc:\r\n\r\n    backend : pro\r\n```\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/ionic-team/ionic/issues/comments/348093198","html_url":"https://github.com/ionic-team/ionic/issues/13413#issuecomment-348093198","issue_url":"https://api.github.com/repos/ionic-team/ionic/issues/13413","id":348093198,"user":{"login":"avengyy","id":30956688,"avatar_url":"https://avatars0.githubusercontent.com/u/30956688?v=4","gravatar_id":"","url":"https://api.github.com/users/avengyy","html_url":"https://github.com/avengyy","followers_url":"https://api.github.com/users/avengyy/followers","following_url":"https://api.github.com/users/avengyy/following{/other_user}","gists_url":"https://api.github.com/users/avengyy/gists{/gist_id}","starred_url":"https://api.github.com/users/avengyy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/avengyy/subscriptions","organizations_url":"https://api.github.com/users/avengyy/orgs","repos_url":"https://api.github.com/users/avengyy/repos","events_url":"https://api.github.com/users/avengyy/events{/privacy}","received_events_url":"https://api.github.com/users/avengyy/received_events","type":"User","site_admin":false},"created_at":"2017-11-30T06:17:00Z","updated_at":"2017-11-30T06:17:00Z","author_association":"NONE","body":"Have you tried adding the `expandable` parameter to your `ion-item-options`?\r\n\r\nRight now your code in GitHub is the following\r\n`<ion-list>\r\n        <ion-item-sliding *ngFor=\"let i of [1, 2, 3, 4]\">\r\n            <ion-item (click)=\"item.close()\">\r\n                <button>\r\n                    <h3>Test {{i}}</h3>\r\n                </button>\r\n            </ion-item>\r\n            <ion-item-options side=\"left\" (ionSwipe)=\"deleteItem($event)\">\r\n                <button ion-button color=\"danger\" expandable>\r\n                    <ion-icon name=\"trash\"></ion-icon>\r\n                    </button>\r\n                </ion-item-options>\r\n        </ion-item-sliding>\r\n    </ion-list>`\r\n\r\nCould you try this\r\n\r\n`<ion-list>\r\n        <ion-item-sliding *ngFor=\"let i of [1, 2, 3, 4]\">\r\n            <ion-item (click)=\"item.close()\">\r\n                <button>\r\n                    <h3>Test {{i}}</h3>\r\n                </button>\r\n            </ion-item>\r\n            <ion-item-options side=\"left\" expandable (ionSwipe)=\"deleteItem($event)\">\r\n                <button ion-button color=\"danger\" expandable>\r\n                    <ion-icon name=\"trash\"></ion-icon>\r\n                    </button>\r\n                </ion-item-options>\r\n        </ion-item-sliding>\r\n    </ion-list>`"}}
{"actor":{"display_login":"avengyy"}}