Skip to content

Unable to animate full swipe on ion-item-sliding #13413

@sburnicki

Description

@sburnicki

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Current behavior:
When 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.

To do this I use an ion-item-sliding with a ion-item-options that has an expandable button.
Until 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:

swipe_to_remove_no_animation
Behavior with current ionic version

Expected behavior:
I want to call moveSliding in the swipe event handler, so to have a common "swipe to remove animation":

swipe_to_delete
Behavior before upgrading

Steps to reproduce:

  1. Call moveSliding in the swipe event handler
  2. See that it doesn't have an effect anymore.

Related code:
Minimal working example

Code called on (ionSwipe)

  deleteItem(item: ItemSliding) {
    const nativeElement = <HTMLElement> item.item.getNativeElement();
    const moveFactor = item.getOpenAmount() > 0 ? -1 : 2.5;
    const x = nativeElement.offsetWidth * moveFactor;
    item.setElementClass("removed", true);
    item.moveSliding(x);
  }

Other information:
I report this as a bug as it did work before.
I suspect the following commit to be the reason why it doesn't work anymore:
92c082a

Before, 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.

A workaround is to call moveSliding in setTimeout. However, this workaround easily breaks if other things are going on (like showing toast, multiple swipes, ...).

As this animation is really common for users, I'd really want to see it working again.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.0.0 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0 ios 4.5.1
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v6.11.5
    npm  : 4.1.2 
    OS   : Linux 4.9

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions