Ionic and annimation

I’m looking to move a div up and down the screen based on swipes. I have two questions:

  • Can you have multiple on-swipe-* entries on a single html element?
  • How would you use css animations to move the div?

Thanks

1.on-swipe issues may concern a lot with javascript architecture, I may not give you a clear answer. But according to the official doc, same gestures may prevent each other. But if you mean putting swipe-up and swipe-down together, that is totally fine according to my experience.

2.There are two ways:Firstly and normally, we add a class that has a different properties from the former one. For example:

.play {position:absolute;top:0;left:0;transition:all 1s linear}

Make sure the transition is correctly written, it has many other properties I didn’t declare here. You may refer it here:
http://www.w3schools.com/css/css3_transitions.asp
Then define another class:

.play.right {right:0}

In between there contains some css selection priority issues which I may not be able to clarify here.

Lastly by using ng-class or directives or even jQuery to addClass to add the “right” class to this “play” div, it will move to the right because the “right:0” overrides the “left:0”. And after you remove the class, it will come back to the left again.

The second way is to use CSS3 keyframes, which can be also done by adding classes that contains the keyframes, so I won’t provide another example here, you can refer to
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Hope this helps.

1 Like

Hi!

Thanks for your reply. That really helps. One final question for you, how would I add and remove the class. Is there an ‘angular’ way of doing that? Or do I just revert to JQuery?

You can use “ng-class”,for example:

<div ng-class="{'right':SCOPEVAR}"></div>

or any expression or functions that may return true or false

<div ng-class="{'right':1==2}"></div>

Then simply change the boolean or expressions or functions return value to make the class removed or added.

Another way which may be more advanced is to use directives, in the link function, use element.addClass() for special events,see here.


(Angular itself has a jqlite, the problem is how do you select the element)

1 Like

Thanks. This answered my question and helped me out a a lot!