$ionicListDelegate closeOptionButtons without animation?

ionic-v1
1

Hello !

Is it possible to get no animation when calling $ionicListDelegate.closeOptionButtons(); ?

I put a “delete” button inside item-options to delete a list item.
It works properly but when item is deleted, a new data is immediately affected to the item (normal).
But the problem with this is that I can click multiple time on my “delete” button before item-options gets fully closed and delete multiple items.

That’s why i’d like to close the item-options directly with no animation. Plus it would be less disturbing for the user than seing the deleted item still animating but with a new data inside it.

Any recommandation ?

Have a good day !

2

another approach would be to close the buttons first and then remove the item or show a loading layer.

or set a flag --> to disable the buttons for the duration of the animation ooooor disable swiping those elements for that time with
http://ionicframework.com/docs/api/service/$ionicListDelegate/
canSwipeItems()

3

Hello Bengtler !

A flag to avoid deleting item during a small amount of time is indeed a solution i had in mind but i’m still not a big fan of having the closing animation on the same “visual” item but already populated with a new data : /

I’d also like to avoid having a loader that would slow down the navigation experience.
Closing THEN deleting the item would also slightly slow down the experience but is still the best of the solutions i have right now in term of UX.

Wouldn’t it be possible get a boolean as parameter of closeOptionButtons() to disable the animation if necessary ?

I guess there’s no easy way to achieve what i’d like to do right now ?

Thank you for your answer : ) !

4

try to set a flag with a timeout and add the class ng-hide to the buttons?

i do not know how the animation works. maybe you can overwrite it

5

Ok i found my way thanks to you !

In case it can be helpful to anyone else here is what i did.
I first added this to my ion-item :

ng-class="canClick? '' : 'force-close'"

I added this SCSS :

ion-item {
	&.force-close {
		.item-content {
			-webkit-transform: translate3d(0px, 0px, 0px) !important;
			transform: translate3d(0px, 0px, 0px) !important;
			-webkit-transition: nonde;
			transition: nonde;
		}
	}
}

And in my controller i simply set the canClick flag to false on an item’s deletion, and set it back to true after a short delay on a $timeout. A zero milliseconds delay seems to work (probably acts like a “next render” delay) but i set a 50ms as a safer solution.

I need the delay otherwise after deleting an item it would fire the ng-click handler on the “new” item.

Thank you for your help : )