Basically 3 ways of doing this just off the top of my head. But before that, just a basic overview of what happens:
- User trigger page change
- JS checks if animate (Router.prototype.animateWithCSS :framework7.js)
- Gets the right CSS class based on direction (var routerTransitionClass :framework7.js)
- CSS does it’s magic
- CSS removed after transition
Ways to do this listed from what I assume to be easiest: (I assume easiest possible way preferred since you attached different library’s)
- Replace CSS behavior with desired effect. This will limit you based on the number of transition types available. (To one)
- Replace the CSS class that is used in the transition with one you listed above and hope to to the lord it works perfect
- Add another data attr to your html so you can choose the transition type. You will need to edit the Framework7.js file or extend it. Plus you will need extra CSS to represent the new transitions.
You want to search for the classes with
.router-transition-css (framework7,css) if you choose the first option.
Perhaps this should be a feature request as well. But depending on how true we want to stay to the iOS and Material guidelines.
Best of luck