Ionic swipe gesture event while swipe is in progress

ionic-v1
1

I’m using the on-swipe-left directive in my app to respond to swipe gestures with a custom function. I need to animate an element while it is being swiped (it needs to ‘slide along’ with the swipe gesture). In the past, we used ng-swipe for this, because it provides a ‘move’ function that holds the current position of the element while it is being swiped. However, since ng-swipe has a dependency on ng-touch, and the latter should not be used in combination with Ionic, we’re now looking into the built-in gestures of ionic.

Is there any way to get the current position of an element while it is being swiped? Or, alternatively, is there any other way to apply a custom animation to the on-swipe event?

2

I got it working using Ionics ‘drag’ event, which is also fired when swiping. The implementation turned out to be really easy. If anyone bumps into the same problem, this is the directive I use (currently only for webkit):

	myModule.directive('dragAnimation', ['$ionicGesture', function (ionicGesture) {
	return {
		restrict: 'A', 
		link: function (scope, element) {
			ionicGesture.on('drag', function (event) {
				element.css({ "-webkit-transform": "translate(" + event.gesture.deltaX + "px, " + event.gesture.deltaY + "px)" });
			}, element);

			ionicGesture.on('dragend', function() {
				element.css({ "-webkit-transform": "translate(0)" });
			}, element);
		}
	}
}]);
2 Likes
3

Thanks for you directive. That’s what I needed.
I’ve improved yours a little, allowing to move only horizontaly or verticaly with drag-animate="(horizontal|vertical)" or by combining both drag-animate="horizontal+vertical" (an empty value means both directions). Works also on other browsers that Webkit.

.directive('dragAnimate', ['$ionicGesture', function (ionicGesture) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var a =  attrs.dragAnimate.trim();
            var moveH = (a == '' || attrs.dragAnimate.match(/horizontal/));
            var moveV = (a == '' || attrs.dragAnimate.match(/vertical/));

            ionicGesture.on('drag', function (event) {
                var tx = (moveH ? event.gesture.deltaX +'px' : '0');
                var ty = (moveV ? event.gesture.deltaY +'px' : '0');
                var translate = 'translate('+ tx +','+ ty +')';
                element.css({ 'transform': translate,
                            '-webkit-transform': translate });
            }, element);

            ionicGesture.on('dragend', function() {
                element.css({ 'transform': 'translate(0)',
                            '-webkit-transform': 'translate(0)' });
            }, element);
        }
    }
}])
2 Likes
4

can i use this to trigger the swipe animation when the user click as a button? @mforeau @sophietraen

thanks in advance

5

Although this is possible, I think it is a little overkill to use $ionicGesture to do this. Just use ng-click and ng-class to set a class to your element when it’s clicked. Then, just use css transitions to apply the swipe effect.

Here’s a plunkr to demonstrate this.

1 Like