Transition Issue while navigating back

I have problem for the transition effect. It happen on every page when i am trying to navigate it back to the previous page. The previous page isn’t ready yet to be rendered until transition phase is ended.


Please look at the video here

Also, here’s my routes source:

Summary

var routes = [
{
path: “/”, url: “./pages/register.html”
},
{
path: “/main”, url: “./pages/main.html”
},
{path: “/profile”, url: “./pages/profile.html”, options: {
transition: ‘f7-parallax’
}},
{path: “/check-in”, url: “./pages/check-in.html”, options: {
transition: ‘f7-push’
}},
{path: “/map”, url: “./pages/map.html”, options: {
transition: ‘f7-parallax’
}},
{path: “/history”, url: “./pages/history.html”, options: {
transition: ‘f7-parallax’
}},
{path: “/history_detail/:history_id/”, url: “./pages/history_detail.html”,
options: {
transition: ‘f7-push’
},
name: ‘history_detail’
},
{path: “/manage”, url: “./pages/manage.html”, options: {
transition: ‘f7-parallax’
}}
];

App source:

Summary

var app = new Framework7({
root: “#app”, name: “Security Guard Checkpoint”,
id: “com.tyfountex.sgc”, panel: {
swipe: “left”
}, routes: routes
});
var $$ = Dom7;

app.views.create(’#view-main’, {
url: “/”,
main: true
});

document.addEventListener(‘deviceready’, onDeviceReady, false);

async function onDeviceReady() {
console.log(“I am ready!”);

$$(document).on("backbutton", function(ev) {
    if (app.dialog.get() != null) return;
    if ($$('#back').length > 0) {
        $$('#back').trigger('click');
        ev.preventDefault();
    } else navigator.app.exitApp();
});

}
$$(document).on(“click”, “#back”, function() {
app.views.main.router.back();
});

Do you have the same problem in the Kitchen?

Do you have the same problem in the Kitchen?

No i didn’t