Alternative to stackedPages

Questions
1

The customized page transition effect might be wrong in v8, since the option stackedPages is removed from codebase.

In my case, I have a 4-step wizard. Each wizard is a f7-page. Transition between wizard pages is “f7-push”, to launch the wizard, I use a special transition “f7-cover-v”.

When I goto step 3, the expected transition should be
“f7-cover-v” > “f7-push” > “f7-push” > “f7-push”
When I click Back, the expected transition should be
“f7-cover-v” < “f7-push” < “f7-push” < “f7-push”
But actually it is
“f7-push” < “f7-push” < “f7-push” < “f7-push”

I build the same project using v7, it is fine.
If I goto step 2, the first transition is expected.

My guess, the stackedPages allow to keep 5 (or more?) pages in DOM. Now after removing this option, it is broken. Is there a way to make this right?

Shall I raise an issue in GitHub?

2

it’s not about v8, but it is actually a bug.
this behaviour was there from the beginning,
namely => you will get the same behaviour on v7 with stackPages: false.

for now, to make it work you must add the transition in route.options:

{
  path: '/cover/',
  component: CoverPage,
  options: { transition: 'f7-cover-v' }
},

vladimir already know (sort-of) about it,
just post an issue on github starting with this => pensive-wind-lk522u - CodeSandbox
and you can use it to make it work for now => pensive-wind-lk522u - CodeSandbox

2 Likes
3

You made my day!!

It’s good to know to define transition in route config rather than as router property like this

<!-- bad example, could be broken in v8 -->
        <f7-button
          text="Launch with different transition"
          href="./launch-wizard"
          transition="f7-cover-v"
        />

Case closed :wink:

4

not really, and it’s not just about transition.

yes, technically options should/must be defined there
but sometime it is easier to dynamically define options on run-time:

let someTransition = true ? 'some-transition' : 'other-transition';

<f7-list-item link="/path/" title="Page" :transition="someTransition" />

instead of:

routes
  .filter(i => i.path == "/path/")
  .map(i => Object.assign(i,{
    options: Object.assign(i.options,{
      transition: someTransition
    })
  }));