Custom Page Transitions

1

I have read that page transitions are CSS based… I will like to customs page transitions with some CSS,

  1. where can I find the lines of code of CSS to customize the current page transition?

  2. is there a way to implement easy different page transitions by page?

something like just simple as putting some attributes for tag:

< div class=“page” name=“index” page-transtion-in=“transition-blablabla-1”
page-transtion-out=“transition-blablabla-2” animated-page=“true”>

and so on…

here a collection of css page animations some of them useful for page transitions:


https://www.minimamente.com/example/magic_animations/
http://bouncejs.com

http://ianlunn.github.io/Hover/

2

Basically 3 ways of doing this just off the top of my head. But before that, just a basic overview of what happens:

  1. User trigger page change
  2. JS checks if animate (Router.prototype.animateWithCSS :framework7.js)
  3. Gets the right CSS class based on direction (var routerTransitionClass :framework7.js)
  4. CSS does it’s magic
  5. 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

2 Likes
3

thanks I will try to do some tests thank you for the tips