Slide Box: fire a function when animation completed

ionic-v1
1

Hey guys, I’m currently using ionic to build a todo calender app, which has pickadate plugin as a module dependency. The slidebox animation freeeze in the middle a little bit every time I try to slide left or right. I guess perhaps it because the function executes immediately after slide change but the animation effect is still in process.

Just wondering if there a away to fire a function onlyif the slidebox animation has completed. In other words, any delegation method like "$ionicSlideBoxDelegation.animationCompleted().then(dothis());

Thanks in advance.

Ionic Rocks!

2 Likes
2

There is.

on-slide-changed

http://ionicframework.com/docs/api/directive/ionSlideBox/

3

hi mhartington,
thank you for your reply. I was using on-slide-changed in the first place during my devlopment, and realized that most of the time the on-slide-changed listener fires immediately after when my finger goes off the screen, where the animation still running.
When angular try to re-render the dom while the animation is still running, there is a tiny bit freeze on that animation process.
My idea is to put the function execute after the animation completed so that there wont be any freeze on the screen.
Any idea how I can listen for the animation to be completed?
Thank you.

4

Maybe you could provide a codepen demo to show what you have so far

5

I notice the same bahavior.
I need to achieve dynamic slide, so basically each time a slide is changed, I need to update the prev or next slide.
It’s very smooth in my desktop browser, but when I try it in Android 4.4, the animation is not so smooth.
I think it’s because when doing the slide animation, my callback function hooked on on-slide-changed is also executing.
If I add some timeout in the callback function, the animation will become smooth. But the timeout interval is hard to choose, is there such animation complete event I can leverage? Thanks.

1 Like
6

You could use the $ionicView.afterEnter event, which will be called after the animations are finished.

http://ionicframework.com/docs/api/directive/ionView/

7

@mhartington the doc is related to ionView, does this afterEnter event also apply to the ion-slide transition?

8

I came to the same conclusion. Your idea to use a timeout is an adequate solution for my case but it would be nice to capture this event.

10

You can use the slide-interval property and then set the timeout to be the same. This way you can be sure of what the time out should be.

11

I have a solution that’s not too angular-friendly (it involves DOM manipulation in the controller), but it works.

The idea is to add an event listener to <ion-slide class="slider-slide"> to listen for the transitionend event.

Here’s a CodePen to illustrate the idea.

12

hi, as in new version of ionic, ionic removed ionic-slide-box and started using http://idangero.us/swiper

so i am having same problem described in question. you have any idea how to achieve that with.

<ion-slides>
		 	<ion-slide-page ng-repeat="category in vm.categories" >
		 	<!--  on-slide-changed="vm.getData(category.guid)" -->
		 	
				
					<div class="products">
						<div ng-repeat="p in vm.products" class="row">
							<div class="item-container">
								<div class="trapezoid"></div>
								<div class="item">
									<img ng-src="{{p.thumb}}" ng-if="p.thumb.indexOf('https://skounis.s3.amazonaws') == -1" >
									<h2>{{p.title}}</h2>
									<h4>{{p.body}}</h4>
									<h3>{{p.price[0].value}} zł</h3>
									<button class="add-btn" ng-click="vm.addToCart({{p.id}},1)">+ ADD</button>
									<button class="more-info" ng-click="vm.showProductDetails(p.guid)">MORE INFO &#187;</button>

									
									<!-- <div class="prod-like">
										<i class="ion-ios-heart-outline" ng-click="vm.addtofav(p)"></i><br>

										<span>143</span>
									</div> -->
								</div>
							</div>
						</div>
					</div>
				
			</ion-slide-page>
	</ion-slides>